display：inline-block和overflow：隐藏导致不同的垂直对齐

以下代码在不同浏览器中呈现不同（IE = FF =高于基线，Chrome =基准）。display：inline-block和overflow：隐藏导致不同的垂直对齐

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

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

来源

2013-02-14 mh543

看来Chrome是错误的。该CSS 2.1 spec说

的“inline-block的”的基础是它的最后一行箱在正常流量基线，除非它有或者没有在流线箱，或者如果它的“溢出”属性具有除“可见”以外的计算值，在这种情况下基线是底部边缘边缘。

由于overflow属性计算比“可见的”内联块的基准线为底边边缘，它坐落在含行框的基线，因此必须筹集最多包含的文本，让其他的东西该文本的下行空间。

来源

2013-02-14 08:16:04 Alohci

非常感谢。 http://code.google.com/p/chromium/issues/detail?id=176244 – mh543 2013-02-14 16:41:31

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

删除样式overflow: hidden;。这里不需要。只有当您给出width或text-overflow: ellipsis;时，您才需要此选项。
添加vertical-align: bottom;。当显示从inline更改为inline-block时，文本的垂直对齐将发生变化。

来源

2013-02-14 07:56:48

1.我发表了最小工作示例。我将所有不需要的东西都留给了我想要展示的行为。 2.不，垂直对齐导致不同浏览器中的结果不同，如原始发布中所述。 – mh543 2013-02-14 11:17:05

是的。每个浏览器都在其中处理'inline-block'的默认值。 – 2013-02-14 12:07:47

-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-14 09:13:02 Kingk

display：inline-block和overflow：隐藏导致不同的垂直对齐

回答

相关问题