La cellule de la Table et de la frontière de l'affichage différemment dans IE/Chrome et Firefox/Opera

Après plusieurs heures de frustration que j'ai enfin tourné vers l'internet pour la réponse. Imaginez très simple, ce morceau 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 tableau 100px 100px de large et de haut avec un 6px frontière. Aussi simple qu'il y paraît, il est différent dans les différents navigateurs. Dans IE8 et google chrome la cellule du tableau est de 112 x 112 px (donc 100px l'intérieur et à l'6px à l'extérieur). Dans Firefox 3 et opera la table est de 112 x 100 px (si pour une raison quelconque, la frontière est ajoutée à la largeur de la table, mais pas à la hauteur de la table).

Au sérieux, ce qui donne? Et comment puis-je faire ce rendu de la même manière sur tous les navigateurs (et non, je ne peux pas utiliser un div j'ai besoin d'utiliser un tableau dans ce cas).

OriginalL'auteur | 2009-03-31

  1. 7

    Au sérieux, ce qui donne?

    Ouais... cellule de tableau des hauteurs et de la bordure verticale sont vraiment très mal défini dans la spécification CSS 2.1. Il n'y a rien qui explique comment ils interagissent, et le standard de modèle de bloc n'est pas tout couvrir. La figure à l'article 17.6.1 où ils démontrent la définition des largeurs ostensiblement ne couvre pas les hauteurs.

    FWIW, je ne pense pas que Mozilla/Opera interprétation n'a aucun sens, mais je ne peux pas dire que c'est hors-and-out faux.

    comment puis-je faire ce rendu de la même manière sur tous les navigateurs (et non, je ne peux pas utiliser un div j'ai besoin d'utiliser un tableau dans ce cas).

    Comment faire un div à l'intérieur de la table?

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

    Maintenant, c'est clair qui mesure la "100px" se rapporte. Cela fonctionne pour moi.

    Oui, cela a résolu mon problème. Je l'ai ignoré cette solution avant à cause de l'animation des problèmes avec scriptaculous dans une situation différente. Dans cette situation, il fonctionne bien 🙂

    OriginalL'auteur bobince

  2. 0

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

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    J'ai juste essayé de substituer le doctype dans le code ci-dessus ... sans succès

    OriginalL'auteur Scott Evernden

  3. 0

    J'ai foiré autour avec elle un peu, et il ya un couple de choses, mis ensemble, qui leur faisaient la même chose pour moi dans IE7 et Firefox 2. Les deux choses que j'ai eu à faire étaient:

    a) ajouter display:block; pour le style de la cellule de tableau (Firefox est rendu à la hauteur de la cellule de la même façon que IE n');

    b) ajout d'un espace de non-rupture de la cellule (sinon IE n'affiche pas les frontières).

    Je n'ai pas IE8 ou Firefox 3 chargés, mais vous pouvez lui donner un essai. Vous ne savez pas si il y a des effets secondaires à la modification de l'affichage de bloc, mais il n'résoudre le problème.

    ‘display: block " permettrait d'arrêter la cellule étant traitée comme une cellule de tableau dans les navigateurs autre que IE, de sorte que toute les autres cellules permettrait de faire la mise en page de tomber en morceaux.
    Avez-vous réellement vérifié que, ou juste en supposant? Je suis en train de regarder dans Firefox 2, et il semble juste comme n'importe quelle autre cellule du tableau pour moi.
    nbsp n'est requierd pour les cellules de tableau vides dans IE (sinon ce n'est pas de cellule)

    OriginalL'auteur patmortech