chrome vs FF/IE/Opera dans le calcul de la table largeur de la cellule ? (table-layout:fixed)

J'ai cherché depuis maintenant presque une demi-journée... mais je ne pouvais pas savoir pourquoi chrome6/7 semble être le seul navigateur en comparaison à IE8/FF3.6/Opéra qui n'ajoute pas le rembourrage à la largeur spécifiée d'une cellule de tableau.

Bien sûr, cela est essentiel si vous travaillez avec des de table-layout:fixe,
en raison du fait que tout d'un coup qu'ils ont à payer attention à l'px largeurs.

Bon enfin ma question: est ce que quelqu'un sait pourquoi Chrome calcule différemment, et le navigateur est à droite (standard conforme), et, espérons-le, y a t il une solution élégante?

Pour le moment, ma seule solution serait un commentaire conditionnel avec une finition chrome.css où j'ajoute le rembourrage à la largeur de la main ... frissonner...

(btw: toute personne qui se sent tenté de dire que px largeurs ne sont pas appropriés webdeveloping... n'hésitez pas à laisser cette page en silence)

OUTRE: (en ce qui concerne les réponses)
tout d'abord merci pour vos réponses... j'ai essayé de le rendre aussi courte que possible, et là j'ai réduit les faits au minimum... mais, comme vous l'avez mentionné, il y a beaucoup de varibales dans webdeveloping et j'ai donc essayer de préciser...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd">
<html>
<head>
    <style type="text/css">
        div { width:300px; }
        table { table-layout:fixed; width:100%; height:50px; }
        td.col1 { width:20px; background-color:blue; }
        td.col2 { width:40px; background-color:red; }
        td.col3 { width:60px; background-color:yellow; }
        td.col3 { width:auto; background-color:yellow; } 

        td { padding:5px; }
    </style>
</head>
<body>
    <div>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td class="col1"></td>
                <td class="col2"></td>
                <td class="col3"></td>
                <td class="col4"></td>
            </tr>
        </table>
    </div>
</body>

maintenant, si vous mettez de la css ligne

td { padding:5px; }

dans les différents navigateurs, vous verrez que google chrome inclut le remplissage, à l'intérieur de la largeur, tandis que les autres l'ajouter

espère thats aide à clarifier et merci d'avance
berny

Pourriez-vous poster un petit exemple qui illustre le problème que vous voyez?
Êtes-vous fournir un doctype valide? par exemple, le rendu en mode standard. cela fait une grande différence lorsque vous essayez de contrôler le rendu.
j'ai ajouté quelques lignes de mon post original, de l'espérance qui nous aide à clarifier
Viens de remarquer que dans votre édité exemple ci-dessus, vous avez deux td.col3 dans votre feuille de style. Comme ce serait le front-aplatissement si c'était votre question, je ne peux que supposer que c'est un mineur faute de frappe dans le post, et pas votre code.

OriginalL'auteur berny | 2010-08-31

  1. 3

    J'ai le même problème et, malheureusement, je n'ai pas trouver une vraie solution, mais j'ai trouvé deux autres fils, un rapport de bug + un travail autour de.

    Threads:

    1. Table-layout:fixe différences de rendu de Safari

    2. Les navigateurs Webkit pas de comptabilité pour le remplissage lors de la détermination de la largeur de la cellule dans la table-layout:fixe

    Rapport de Bug:

    https://bugs.webkit.org/show_bug.cgi?id=13339

    Solution Possible: voir le deuxième thread.

    OriginalL'auteur user805346

  2. 2

    J'ai essayé de reproduire ton problème, mais la suite est exactement la même chose pour moi en Chrome 7 et Firefox 3.6:

    <!DOCTYPE html>
<style>
table { table-layout: fixed; border: 1px solid black; }
td { width: 5px; background: green; outline: 1px solid red; padding: 5px; }
</style>
<table>
<tr><td></td><td></td></tr>
</table>

    Pour résoudre votre problème, je vous recommande d'abord, essayez d'ajouter un doctype si vous ne possédez pas déjà un. À l'aide d'un doctype va déclencher le mode standard, ce qui signifie que le comportement est plus susceptible d'être cohérent entre les navigateurs. Celui que j'utilise ci-dessus, <!DOCTYPE html>, est le doctype HTML5, mais il fonctionne réellement pour déclencher le mode standard dans à peu près tous les navigateurs.

    Si les normes de la mode n'est pas vous aider à obtenir une meilleure cohérence, alors essayez de réduire votre problème à un exemple minimal; se débarrasser de tout le superflu, jusqu'à ce que vous êtes de gauche avec juste assez de voir votre problème. L'exemple que j'ai donné ci-dessus montre comment minime je veux dire; juste assez de balisage et de style pour être en mesure de voir facilement les tables et de les comparer entre les navigateurs. Une fois que vous réduire à un minimum d'exemple, on peut voir le problème vous-même, ou si non, vous aurez quelque chose que vous pouvez poster sur un forum comme StackOverflow et d'obtenir beaucoup plus de réponses utiles, comme les gens n'ont pas de deviner ce que votre problème est, ou parcourir une page entière valeur de HTML et de CSS juste pour trouver un peu de problème vous avez été mentionnés.

    OriginalL'auteur Brian Campbell

  3. 1

    Pour la table-layout:fixe avec CSS:

    td { width: 150px; padding: 5px; }

    Ci-dessous montre le résultat (à Gauche: Chrome; à Droite: Firefox):
    [stackoverflow ne m'autorise pas à afficher des images.. pourtant]

    CHROME: 5-140-5
    FIREFOX: 5-150-5

    Suggestion/Solution De Contournement:
    essayez de ne pas utiliser de rembourrage sur les td de la couche. Enveloppez votre contenu au sein de td avec une div/span élément:

    span.column_wrap
{
    padding: 0 3px;
    display: block;
    line-height: 26px;
}

<td><span class="column_wrap">content here</span></td>

    OriginalL'auteur You Qi

  4. 0

    Après avoir ce bug ainsi, j'ai remarqué que dans google Chrome, si vous ajouter de la hauteur de la ligne de la table(par exemple de votre table de titre) à 40, puis ajoutez 5 rembourrage pour l'ensemble de la table, la hauteur des lignes du tableau devient maintenant 45. Ce n'est pas le cas sur Firefox.

    Donc, pour remédier à cela, j'ai réglé la hauteur de la ligne dans le css et ajoutés 0 rembourrage:

    .title {
    height: 45px;
    padding: 0px; 
}

    Sur la ligne du tableau qui comprend le titre du tableau, puis ajouter le remplissage de la table.
    Maintenant, je peux avoir 45px hauteur + 10px remplissage à l'aide de la ligne de titre séjour à 45px(au lieu de devenir 55).

    OriginalL'auteur zefs

  5. 0

    La raison en est probablement l'un des deux:

    1. Vous avez défini l'attribut width de la table et des cellules individuelles, et le total des largeurs de cellules n'est pas la même que la valeur attribuée à la table; ou
    2. La largeur totale des cellules (et donc la largeur de la table) est plus grande que la largeur de l'élément conteneur (div). Si c'est le cas du Chrome redistribuer la cellule largeurs de faire différer de votre CSS.

    En regardant votre balisage, je vous suggère de commencer par le premier paramètre une valeur réelle à la td.col3 ou supprimer 'auto' et voir ce qui se passe.

    OriginalL'auteur boze