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

Question

J'essaie d'obtenir la cohérence entre les navigateurs pour mon site Web.

Il est sur cette page: http://www[insert-dot-here]geld[insert-dash-here]surfen[insert-dot-here]nl/uitbetalingen.html (s'il vous plaît noter que je préfère cette URL ne doit pas être fait explorables pour les robots collecteurs de seo-)

Si vous affichez cette page dans Internet Explorer, Firefox ou Opera, tout va bien, mais Chrome et Safari les tables sont un peu hors de la ligne (comme vous le remarquerez probablement).

Ce qui semble être le problème?

Il me semble que dans Chrome et Safari, la bordure gauche et droite (2px) au total est ajoutée à la largeur de la table définie, tandis que dans les autres navigateurs, la bordure est considérée comme faisant partie de la largeur.

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

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, fondamentalement, j'ai utilisé une table- structure pour organiser des 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, je règle la largeur de table.uitbetaling et table.uitbetaling img, table.uitbetaling td à la même valeur (par ex. le "problème" dans Chrome et Safari est résolu, mais dans Firefox, la bordure du côté droit est vide. Parce que la bordure droite ne peut plus "s'adapter". img et td doit être au moins 2px plus étroit que table.uitbetaling pour que la bordure de droite soit visible dans Firefox.

Y at-il un moyen de résoudre ce problème?

Answer 1

Essayez:

table{border-collapse:collapse;} 

Answer 2

segmenter votre code dans ses éléments les plus simples et les tester sur chaque navigateur. Lorsque vous trouvez les différences, vous pouvez utiliser différentes méthodes de détection de navigateur pour modifier subtilement le code de chaque instance. Cela dit ... si vous ne voulez pas devenir fou furieux, et CSS le fera plus que n'importe quoi dans la programmation laisser le pixel aller si vous le pouvez.

Answer 3

Pour être sûr, j'ouvre habituellement une table de cette façon:

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

Il est HTML « vieux », mais au moins il force la cohérence dans les navigateurs, et puis j'appliquer CSS au besoin.

Answer 4

Je l'avais vérifié avec Opera 11, Google Chrome 7.0.517.44 et FireFox 3.6.12 n'ont vu aucune différence avec la conception de votre site.

Answer 5

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

Lire ceci:

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

Il semble que les navigateurs ont différentes façons d'afficher les frontières, mais la déclaration DOCTYPE (qui va en haut du document html) les forcer à se conformer à la réelle normes, au moins en ce qui concerne le modèle de boîte css.

Note: J'utilise toujours le xhtml DTD de transition pour rendre mon document le plus compatible possible ...

Bonne chance!

Answer 6

Il est recommandé de toujours définir table{border-collapse:collapse;} dans le CSS, puis d'utiliser cell-padding="0" et cell-spacing="0" dans le code HTML de toute façon.

Answer 7

De nos jours, vous devriez utiliser le doctype HTML5, si vous avez des questions sur les frontières s'ajoutant à la largeur de l'élément regarder le style CSS: box-sizing

border-box - comprennent la frontière largeur/hauteur et la largeur rembourrage/hauteur ou essentiellement la largeur vous ensemble comprend les frontières/rembourrage

-boîte de contenu - la largeur définie à la l'élément est que la zone de contenu, cela ne comprend pas un rembourrage ou des bordures

Il y a aussi une boîte de rembourrage que je n'utilise pas, habituellement les deux ci-dessus sont suffisants.

Maintenant, parfois, je pense que IE8 utilise une taille de boîte différente de celle de Chrome/FF etc, c'est pourquoi parfois vous avez des problèmes. Vous pouvez toujours déboguer et vérifier le paramétrage de la taille de la boîte.

Remarque: si vous n'avez pas le DOCTYPE alors vous êtes en mode Quirks et IE technique variant selon SAUVAGE de Chrome/FF sur la boîte taille/modèle de boîte - et c'est votre problème là