html - 垂直对齐锚点中的跨度时的结果不一致，HTML5 与 XHTML

Question

我有一个简单的锚标签，里面有一个跨度，我想垂直对齐。

我让它与 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 中是相同的。以下是每个的 JSFiddles：

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 小提琴的分叉版本：

http://jsfiddle.net/tFXRN/