2

内部にスパンを含む単純なアンカー タグがあり、これを垂直方向に配置したいと考えています。

HTML5 doctype では動作しましたが、同じマークアップと 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-遷移結果:

XHTML-トランジショナル

HTML5 結果:

ここに画像の説明を入力

これらの結果は、Chrome と IE9 で同じです。それぞれの JSFiddles は次のとおりです。

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

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

4

1 に答える 1

2

この更新されたCSSは私のために働いた：

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

XHTML フィドルの分岐バージョンを次に示します。

http://jsfiddle.net/tFXRN/

于 2013-10-26T07:17:07.347 に答える