8

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

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

  2. 你知道如何获得这个解决的跨浏览器的方法吗？如果我更改垂直对齐，我可以让它在某些浏览器中工作，但不能在其他浏览器中工作。

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

4

3 回答 3

8

是的。您需要执行以下操作：

  1. 删除样式overflow: hidden;。这里不需要。只有当你给出一个width或时你才需要这个text-overflow: ellipsis;。

  2. 添加vertical-align: bottom;. 当显示从 更改为 时，文本的垂直对齐方式将inline更改inline-block。

于 2013-02-14T07:56:48.643 回答
6

似乎 Chrome 出错了。CSS 2.1 规范说

'inline-block' 的基线是其在正常流中的最后一个行框的基线，除非它没有流入行框，或者它的 'overflow' 属性具有除 'visible' 之外的计算值，在在这种情况下，基线是底部边距边缘。

由于溢出属性计算为“可见”之外的其他内容，因此内联块的基线是底部边距边缘，它位于包含行框的基线上，因此必须抬起包含的文本以便为该行的下降部分留出空间文本。

于 2013-02-14T08:16:04.547 回答
-1

试试这个

<!doctype html>
<html>
<head>
    <style>
        .a {
            display: inline; 
            overflow: hidden;
            color: red;
        }
    </style>
</head>
<body>
    baseline__<div class="a">test</div>__baseline
</body>
</html>
于 2013-02-14T09:13:02.603 回答