Question

以下代码在不同浏览器中的呈现方式不同（IE = FF =高于基线，Chrome =基线）。

是谁的错？我应该在哪里提交错误报告？
您知道如何解决这个问题的跨浏览器吗？如果我改变了垂直对齐方式，我会在某些浏览器中使用它，而不是其他浏览器。

<!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/

Answer 1

Chrome似乎出错了。 CSS 2.1 spec说

'内联块'的基线是其最后一个线框的基线在正常流程中，除非它没有流入线框或如果它的'overflow'属性有一个除'visible'以外的计算值在哪种情况下，基线是底部边缘边缘。

由于溢出属性计算的内容不是“可见”，因此内联块的基线是底部边缘边缘，它位于包含行框的基线上，因此必须提高包含的文本以允许空间该文本的下降。

Answer 2

是。你需要这样做：

删除样式overflow: hidden;。这里不需要这样做。只有在您提供width或text-overflow: ellipsis;。
添加vertical-align: bottom;。当显示从inline更改为inline-block时，文字的垂直对齐方式会发生变化。

Answer 3

试试这个

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

display：inline-block和overflow：hidden导致不同的垂直对齐方式

3 个答案: