垂直对齐应该应用于孩子吗？答案

【问题标题】：Vertical-align should be applied to the children?垂直对齐应该应用于孩子吗？
【发布时间】：2012-09-17 22:39:55
【问题描述】：

这个属性是否也应该影响它所应用的元素的子元素？

span{
 vertical-align:top;
 font-size:27px;
 border-bottom: 1px solid red;
}
a{
  border-bottom: 1px solid green;
}

<span>
  <a>Hi ho hoh ho</a>
  Hi ho hoh ho
  <a>Hi ho hoh ho</a>
</span>

在 Firefox 上，该属性不会影响子项，但在 Chrome 上，子项未对齐。

Chrome :

火狐：

什么是好的实现？

【问题讨论】：

标签： html css google-chrome cross-browser vertical-alignment

【解决方案1】：

检查这个小提琴：

http://jsfiddle.net/5XMk8/7/

在“a”标签中添加所有文本并给出float:left并使其成为display:block

【讨论】：

这不是肮脏的把戏，因为“a”标签不是默认块，所以悬停可以在块上工作，或者你也可以使用浮动

【解决方案2】：

按照规范，vertical-align 不被继承，但可能会影响内部元素的基线级别。不过，浏览器在此属性的古怪和不同实现方面有着悠久的历史。

使用您的确切代码进行测试，我在 Chrome (22beta) 上看到与在 Firefox 上相同，所以您可能在某些旧版本中遇到了异常。

要查看浏览器之间的明显差异，请使用不同的字体大小。结果将更难解释。无论如何，士气是我们应该避免在大多数情况下使用vertical-align。使用相对定位往往会产生更一致的结果。

【讨论】：

感谢您的回复，但我使用的是 chrome 22 和 Firefox 15。
Chrome 的当前发行版本是 21。如果您在 Chrome 22beta 上看到屏幕截图中显示的结果，那么这可能是安装问题，或者可能取决于设备或设置的字体渲染问题。您的 jdsfiddle 在我的 Chrome 22.0.1229.56 beta-m (Win 7) 上没有出现问题。
你说得对，我只是在另一台电脑上试了试，问题没有出现。我会尝试重新安装 Chrome