Несогласованные результаты при вертикальном выравнивании диапазона в привязке, HTML5 и XHTML

Question

У меня есть простой якорный тег с внутренним пролетом, который я хочу вертикально выровнять.

Я получил его работу с документом HTML5, но та же разметка и CSS не работают с XHTML1-Transitional doctype. Я хотел бы, чтобы не только понять, почему он не работает в режиме 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/