Seulement Firefox ignorant 100% de la hauteur avec display: table-cell

Je suis en train de la verticale du centre de l'élément par l'établissement de ses parents à display: table et ensuite l'élément de display: table-cell; vertical-align: middle;. Je suis également le réglage de la hauteur de l'élément de 34% et son parent 100% afin qu'elle remplisse l'écran.

Cela fonctionne parfaitement sur tous les navigateurs (y compris IE 8+), mais Firefox. Firefox ignore simplement la hauteur et s'effondre à la hauteur de l'élément span.

Pourquoi en serait-il passe?

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;
}

OriginalL'auteur Amir Khan | 2013-10-21

  1. 7

    Prendre toute la hauteur des déclarations off: un ensemble de display: table-cell comme un enfant de certains élément de jeu à display: table doit toujours être à 100% de la hauteur de son parent.

    Vous avez également display: block et display: table-cell sur le même élément. Même si le display: table-cell aura préséance (parce que c'est la dernière), vous devriez essayer et de garder votre code propre.

    Le code ci-dessous fonctionne dans Firefox pour moi:

    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; }

    Démo sur JS Fiddle.

    upvoted pour lutter contre la downvote. Cette réponse semble fonctionner, adresses OP question, et il est tout à fait raisonnable.

    OriginalL'auteur Adam