Inconsistent results when vertically aligning a span in an anchor, HTML5 vs XHTML

Question

I've got a simple anchor tag with a span inside, which I want to have vertically aligned.

I got it working with an HTML5 doctype, but the same markup and CSS doesn't work with an XHTML1-Transitional doctype. I would like to not only understand why it doesn't work in XHTML mode but what the correct way to do this is that will work in both modes :)

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-Transitional Result:

HTML5 Result:

These results are the same in Chrome and IE9. Here are the JSFiddles for each:

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

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

Answer 1

this updated CSS worked for me:

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

Here is a forked version of your XHTML fiddle:

http://jsfiddle.net/tFXRN/