cellule de tableau et la frontière affichant différemment dans IE / Chrome et Firefox / Opera

StackOverflow https://stackoverflow.com/questions/701332

  •  22-08-2019
  •  | 
  •  

Question

Après plusieurs heures de frustration je me suis finalement tourné vers l'Internet pour la réponse. Imaginez ce morceau extrêmement simple de code: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>AARRRRRRGH</title>
    </head>
    <body>
        <table>
            <tr>
                <td style="width: 100px; height: 100px; background: #000000; padding: 0px; border: 6px solid #FF0000;"></td>
            </tr>
        </table>
    </body>
</html>

Maintenant, cela semble assez simple, créer une cellule de table 100px de large et 100px de haut avec une bordure de 6px. Aussi simple que cela semble, il semble différent dans les différents navigateurs. En chrome IE8 et Google la cellule du tableau est de 112 x 112 px (si 100px l'intérieur et à l'extérieur de 6px). Dans Firefox 3 et l'opéra de la table est de 112 x 100 px (donc pour une raison quelconque la bordure est ajoutée à la largeur de la table, mais pas à la hauteur de la table).

Sérieusement, ce qui donne? Et comment puis-je faire de ce rendre le même sur chaque navigateur (et non, je ne peux pas utiliser un div je dois utiliser une table dans ce cas).

Était-ce utile?

La solution

  

Sérieusement, ce qui donne?

Ouais ... table hauteurs de cellule et bordure verticale sont vraiment très mal définies dans la spécification CSS 2.1. Il n'y a rien qui explique pleinement la façon dont ils interagissent, et le modèle de bloc standard ne couvre pas tout à fait. La figure à la section 17.6.1 où ils démontrent la définition des largeurs ne couvre pas les hauteurs ostensiblement.

FWIW Je ne pense pas que l'interprétation de Mozilla / Opera a un sens, mais je ne peux pas dire qu'il est hors-and-out mal.

  

comment puis-je faire de ce rendre le même sur chaque navigateur (et non je ne peux pas utiliser un div j'utiliser une table dans ce cas).

Que diriez-vous d'un div dans la table? 

<td style="width: 100px; background: black; padding: 0; border: 6px solid red;">
    <div style="height: 100px;">...</div>
</td>

Maintenant, il est clair que la mesure « 100px » fait référence. Cela fonctionne pour moi.

Autres conseils

Avez-vous essayé d'autres DOCTYPES? J'ai eu une bonne chance avec: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Je foiré avec elle un peu, et il y a une ou deux choses, mis en place, qui les fait regarder la même chose pour moi dans IE7 et Firefox 2. Les deux choses que je devais faire sont:

a) ajouter display:block; au style de la cellule de table (Firefox a rendu la hauteur des cellules de la même manière que IE a);

b) ajoute un espace de non-rupture de la cellule (autrement IE n'a pas afficher les frontières).

Je n'ai pas IE8 ou Firefox 3 chargés, mais vous pouvez essayer. Je ne sais pas s'il y a des effets secondaires à changer l'écran pour bloquer, mais il ne résout le problème.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top