4

親を に設定してから要素を に設定して、要素を垂直方向に中央揃えにしようとしていdisplay: tableますdisplay: table-cell; vertical-align: middle;。また、要素の高さ34%とその親を に設定し100%て、画面いっぱいに表示されるようにします。

これは、Firefox 以外のすべてのブラウザー (IE 8 以降を含む) で完全に機能します。Firefox は高さを無視し、span 要素の高さに折りたたまれます。

なぜこれが起こるのでしょうか？

CSS

#homeNav ul {
  padding: 0;
  margin: 0;
  height: 100%;
}
#homeNav li {
  height: 34%;
  display: table;
  width: 100%;
}
#homeNav li a {
  min-height: 177px;
  height: 100%;
  line-height: 100%;
  display: block;
  text-decoration: none;
  font-size: 48px;
  border-bottom: 1px solid #fff;
  display: table-cell; vertical-align: middle;
}
#homeNav li a.last {
  border-bottom: none;
}
#homeNav li a:hover, #homeNav li a.active {
  background: none;
}
#homeNav li a span {
  padding: 50px 0 50px 100px;
  display: block;
  background: url(../images/main-nav-hover_bg-large.png) no-repeat;
  background-position: 120px 50px;
  padding-left: 160px;
}
4

1 に答える 1

9

すべての高さの宣言を取り除きます: に設定さdisplay: table-cellれた要素の子として設定されたアイテムdisplay: tableは、常にその親の 100% の高さでなければなりません。

また、同じ要素にdisplay: blockとがあります。display: table-cellがdisplay: table-cell優先されますが (最後であるため)、コードをきれいに保つようにしてください。

以下のコードは、Firefox で動作します。

HTML:

<div>
    <a href="#">test</a>
</div>

CSS:

div { display: table; height: 100px; border: 4px solid #000; width: 300px;}
a { display: table-cell; border: 4px solid #0f0; vertical-align: middle; text-align: center; }

JS Fiddle のデモ。

于 2013-10-21T22:36:31.220 に答える