html - 在 anchor 中垂直对齐跨度时结果不一致，HTML5 与 XHTML

Question

我有一个简单的 anchor 标记，里面有一个跨度，我想将其垂直对齐。

我可以使用 HTML5 文档类型，但相同的标记和 CSS 无法使用 XHTML1-Transitional 文档类型。我不仅想了解为什么它在 XHTML 模式下不起作用，而且还想了解在两种模式下都可以工作的正确方法是什么:)

HTML

<a href="#">
    <span></span>
</a>

CSS

a {
  background-color: #2c0200;
  font-size: 11px;
  height: 30px;
  display: inline-block;
  line-height: 30px;
}

span {
  display: inline-block;
  vertical-align: text-top;

  background-image: url(http://upload.wikimedia.org/wikipedia/commons/b/b2/Happy_icon-16x16.gif);

  width: 14px;
  height: 14px;
}

XHTML-过渡结果:

HTML5 结果:

这些结果在 Chrome 和 IE9 中是相同的。以下是每个的 JSFiddle:

XHTML: http://jsfiddle.net/4r4af/

HTML5: http://jsfiddle.net/9wyg8/

Answer 1

这个更新的 CSS 对我有用:

a {
  background-color: #2c0200;
  font-size: 14px;
  height: 30px;
  display: table-cell;
  vertical-align:middle;
}

这是 XHTML fiddle 的 fork 版本:

http://jsfiddle.net/tFXRN/