html - 垂直对齐应该应用于孩子吗？

Question

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

这是我的例子

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 上，子级未对齐。

铬合金 ：

火狐：

什么是好的实施？

Answer 1

检查这个小提琴：

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

在“a”标签中添加所有文本并给出float:left并制作display:block

Answer 2

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

使用您的确切代码进行测试，我在 Chrome (22beta) 上看到与在 Firefox 上一样，所以也许您在某些旧版本中遇到了奇怪的问题。

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