本文介绍了显示:内联块和溢出:隐藏导致不同的垂直对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

以下代码在不同浏览器中的呈现方式不同
(IE = FF =高于基准值,Chrome =基准值)


  1. 是谁的错?我应该在哪里提交错误报告?

  2. 你知道如何让这个跨浏览器解决的方法吗?如果我更改垂直对齐方式,我可以在某些浏览器中使用它,但不能使用其他浏览器。

    lang-html prettyprint-override> <!doctype html>
    < html>
    < head>
    < style>
    .a {
    display:inline-block;
    overflow:hidden;
    颜色:红色;
    }
    < / style>
    < / head>
    < body>
    baseline __< div class =a> test< / div> __ baseline
    < / body>
    < / html>

    解决方案

    看来Chrome是错误的。 说:

    由于溢出属性计算为可见以外的内容,因此内嵌块的基线是底边缘,位于包含线框的基线上,因此必须向上包含的文本,以允许该文本的下行空间。


    The following code renders differently in different browsers(IE = FF = higher than baseline, Chrome = on baseline).

    1. Whose fault is it? Where should I file a bug report?

    2. Do you know a way how to get this solved cross-browser. If I change vertical-alignment, I get it to work in some browsers, but not the others.

    <!doctype html>
    <html>
    <head>
        <style>
            .a {
                display: inline-block;
                overflow: hidden;
                color: red;
            }
        </style>
    </head>
    <body>
        baseline__<div class="a">test</div>__baseline
    </body>
    </html>
    

    http://jsfiddle.net/T2vQj/

    解决方案

    It seems Chrome is in error. The CSS 2.1 spec says

    Since the overflow property computes to something other than 'visible' the inline-block's baseline is the bottom margin edge, which sits on the baseline of the containing line box, and therefore must raise up the contained text to allow space for the descenders of that text.

    这篇关于显示:内联块和溢出:隐藏导致不同的垂直对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-11 02:39