CSS: Chrome et Safari semblent «ajouter» la frontière à la largeur, tandis que IE, Firefox & amp; Opera ne pas

Je suis en train de réaliser de la croix-navigateur de cohérence pour mon site.

C'est sur cette page: http://www[insérer points]geld[insérer le tableau de bord-ici]surf[insérer le-point-ici]nl/uitbetalingen.html (veuillez noter que je préfère cette URL à ne pas faire crawlable pour le référencement-les robots)

Si vous affichez cette page dans IE, Firefox ou Opera, tout est très bien, mais dans Chrome et Safari, les tables sont un peu hors de la ligne (comme vous pouvez probablement voir clairement).

Ce qui semble être le problème?

Il me semble que dans Chrome et Safari, la gauche et la droite de la bordure (2px) sont ajoutés à la table de jeu de largeur, alors que dans les autres navigateurs, la frontière est considéré comme faisant partie de la largeur.

Le (la plupart) CSS-les lignes sont les suivantes (à partir de la table.css fichier, également disponible sur la page du fichier source):

table.uitbetaling {
 margin: 11px 18px 10px 19px;
 border: 1px solid #8ccaee;
 width: 498px;
 padding: 0;
}
table.uitbetaling img, table.uitbetaling td {
 margin: 0;
 border: 0;
 padding: 0;
 width: 496px;
}
table.uitbetaling tr {
 margin: 0;
 border: 0;
 padding: 0 1px 0 0;
}

Donc en gros, j'ai utilisé un tableau de structure pour organiser les images, comme ceci: (la classe de la table est uitbetaling)

<table>
<tr><td><img /></td></tr>
<tr><td><img /></td></tr>
...
<tr><td><img /></td></tr>
</table>

Si, ici, j'ai défini la largeur de table.uitbetaling et table.uitbetaling img, table.uitbetaling td à la même valeur (par exemple, les deux 496 ou 498), le "problème" dans Chrome et Safari est résolu, cependant dans Firefox le côté droit de la frontière est que vide. Parce que le bon côté de la frontière ne peut pas "adapté" en plus. img et td doit être d'au moins 2px plus étroite que la table.uitbetaling pour la droite-frontière visible dans Firefox.

Est-il un moyen pour résoudre ce problème?

source d'informationauteur Michiel | 2010-03-27

  1. 5

    Aujourd'hui, vous devriez être en utilisant le doctype HTML5, si vous avez des questions sur les frontières s'ajoutant à la largeur de l'élément regardez en haut de la feuille de style CSS: box-sizing

    border-box - comprennent des frontières largeur/hauteur et rembourrage largeur/hauteur ou essentiellement de la largeur que vous avez défini inclut les frontières/rembourrage

    contenu de la boîte de - la largeur que vous avez défini sur l'élément est uniquement la zone de contenu, cela ne veut pas inclure rembourrage ou des frontières

    Il est également padding-box à laquelle je ne pas utiliser, généralement les deux ci-dessus sont assez.

    Maintenant parfois, je pense que IE8 utilise une autre box-sizing de Chrome/FF etc, c'est pourquoi parfois vous avez des questions. Vous pouvez toujours debug et vérifier ce que le box-sizing.

    Remarque: si vous n'avez pas le DOCTYPE, alors vous êtes en mode quirks, et IE diffère SAUVAGEMENT à partir de Chrome/FF sur la case taille/modèle de boîte - et c'est votre problème

  2. 0

    segment de votre code en ses éléments les plus simples et les tester sur chaque navigateur. Lorsque vous trouver les différences, vous pouvez utiliser différentes méthodes de détection du navigateur pour modifier subtilement le code pour chaque instance. Cela dit... si vous ne voulez pas aller stark raving mad, et le CSS ne sera que plus rien dans la programmation de laisser le pixel aller si vous le pouvez.

  3. 0

    Pour être sûr, j'ai l'habitude d'ouvrir une table de cette façon:

    <table cellspacing="0" cellpadding="0">

    Il est "vieux" HTML, mais au moins ça force le long de la cohérence des navigateurs, et puis j'ai appliquer le style CSS que nécessaire.

  4. 0

    J'avais vérifié avec Opera 11, Google Chrome 7.0.517.44 et FireFox 3.6.12 ai vu aucune différence avec votre conception de site.

  5. 0

    Avez-vous déclarer la DTD (DOCTYPE)?

    Lire ceci:

    http://msdn.microsoft.com/en-us/library/bb250395.aspx

    Il semble que les navigateurs ont des manières différentes d'afficher les frontières, mais de la déclaration du DOCTYPE (qui va en haut du document html) la force de se mettre en conformité avec les standards actuels, au moins en ce qui concerne de modèle de boîte css.

    Remarque: j'ai toujours utiliser la DTD xhtml transitional de faire mon document en tant que bien compatible que possible...

    Bonne chance!

  6. 0

    Essayer:

    table{border-collapse:collapse;}
  7. 0

    Sa bonne pratique de toujours définir table{border-collapse:collapse;} dans le css, et ensuite utiliser cell-padding="0" et cell-spacing="0" dans le code html de toute façon.