Box interprétation du modèle de ligne de table dans Firefox

Question

Tout d'abord: les tables, pas ma conception, mes excuses.

Nous avons pour ce site les produits en vente dans une mise en page. Le site est déjà en ligne, mais il semble qu'il n'ait pas été suffisamment testé. Le développeur est en vacances, donc je dois le réparer. Problème réside dans l'interprétation du modèle de boîte, voici un exemple:

rendu Chrome:

Firefox rendu avec superposition Firebug:

Ce qui se passe est que Chrome ajoute le rembourrage à la hauteur de la td (hauteur: 55px + padding-top: 5px + padding bottom: 10px = 70px), tandis que Firefox garde la hauteur donnée et ajoute le rembourrage à l'intérieur. Je pensais que la question du modèle de boîte était une chose d'IE, mais hélas.

Cependant, la partie de merde est que je n'arrive pas à le réparer. Le td a un colspan="2", que je pense se mêle avec le css.

td.productFooter { 
    background-color: #C4BFB9; 
    height: 55px; 
    padding-bottom: 10px; 
    padding-top: 5px; 
} 

J'ai essayé de changer le display-inline-block (et quelques autres options), ce définit la hauteur correctement, mais je perds mes background-color (par défaut de retour à l'arrière-plan-couleur de la table elle-même) . Si je mets display: block, la hauteur est bonne, mais l'arrière-plan ne colore que la première cellule, il ignore le colspan="2".

Selon MDN-moz-box-sizing: content-box; devrait corriger, mais cela ne fait rien du tout.

Est-ce que quelqu'un a une idée pour résoudre ce problème?

Answer 1

J'ai triché, mais ça marche. Ajouté un div à l'intérieur du td, avec position:relative;height:55px; et qui l'a résolu. Pas vraiment une jolie solution, je sais, mais ça ira jusqu'à ce que le nouveau site soit mis en ligne (dans trois semaines).

<td class="productFooter" colspan="2" > 
    <div style="position:relative;height:55px"> 
    *all the content* 
    </div> 
</td> 

Answer 2

Mon conseil: abandonner les tables. Il ne faut pas longtemps pour coder une mise en page de style tabulaire en utilisant seulement CSS - surtout si l'information est générée à partir d'une base de données comme les données du produit serait. Il vous suffit de le coder au préalable, puis de l'appliquer sur le site en ligne.

Answer 3

Cela ressemble https://bugzilla.mozilla.org/show_bug.cgi?id=248239 qui est fixé dans Firefox 16. qui va expédier le 9 Octobre

Ainsi, selon votre calendrier, peut-être la chose la plus simple d'attendre que jusque-là.