CSS: Chrome und Safari scheinen die Grenze zur Breite hinzuzufügen, während IE, Firefox & Opera nicht

Question

Ich versuche, Cross-Browser-Konsistenz für meine Website zu erreichen.

Es ist zu dieser Seite: http://www[insert-dot-here]geld[insert-dash-here]surfen[insert-dot-here]nl/uitbetalingen.html (bitte beachten Sie, dass ich diese URL lieber nicht für SEO-Bots gemacht gecrawlt wird)

Wenn Sie diese Seite in IE, Firefox oder Opera zu sehen, alles ist in Ordnung, aber in Chrome und Safari sind die Tabellen ein wenig aus der Reihe (wie Sie wahrscheinlich deutlich bemerken werden).

Was scheint das Problem zu sein?

Es scheint mir, dass in Chrome und Safari der linke und rechte Rand (2px) insgesamt zur eingestellten Tabellenbreite hinzugefügt wird, während in den anderen Browsern der Rahmen als Teil der Breite betrachtet wird.

Die (meisten) relevanten CSS-Linien die Folgenden (von der table.css Datei, auch über die Quelldatei Seite) sind:

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; 
} 

Also im Grunde habe ich eine Tabellen- verwendet Struktur Bilder zu organisieren, wie folgt aus:

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

(die Klasse der Tabelle uitbetaling ist) 0

Wenn ich hier die Breite von table.uitbetaling und table.uitbetaling img, table.uitbetaling td auf den gleichen Wert (z. Sowohl 496 als auch 498), das "Problem" in Chrome und Safari ist gelöst, allerdings ist in Firefox der rechte Seitenrand leer. Weil der rechte Rand nicht mehr "hineinpassen" kann. img und td müssen mindestens 2 Pixel schmaler als table.uitbetaling sein, damit der rechte Rand in Firefox sichtbar ist.

Gibt es eine Möglichkeit, dies zu lösen?

Answer 1

Versuchen:

table{border-collapse:collapse;} 

Answer 2

Segment Code in seine einfachsten Elemente und testen sie auf jedem Browser. Wenn Sie die Unterschiede finden, können Sie verschiedene Methoden der Browsererkennung verwenden, um den Code für jede Instanz subtil zu ändern. Mit dem gesagt ... Wenn Sie nicht verrückt werden wollen, und CSS wird mehr als alles in Programmierung tun, lassen Sie den Pixel gehen, wenn Sie können.

Answer 3

Um sicher zu sein, ich öffne in der Regel eine Tabelle auf diese Weise:

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

It "alten" HTML ist, aber zumindest zwingt sie Kohärenz entlang Browser und dann CSS I gelten je nach Bedarf.

Answer 4

Ich habe mit Opera 11 nachgesehen, Google Chrome 7.0.517.44 und FireFox 3.6.12 haben keinen Unterschied zu Ihrem Website-Design gesehen.

Answer 5

Haben Sie die DTD (DOCTYPE) deklariert?

Lesen Sie dazu:

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

Es sieht aus, dass Browser verschiedene Möglichkeiten hat, die Grenzen zu zeigen, aber die DOCTYPE-Deklaration (die an der Spitze des HTML-Dokuments geht) zwingen, mit dem tatsächlichen nachzukommen Standards, zumindest in Bezug auf CSS-Box-Modell.

Hinweis: Ich habe immer den xhtml Übergangs-DTD verwenden, um mein Dokument so viel kompatibel wie möglich ...

Viel Glück zu machen!

Answer 6

Es ist eine gute Praxis, immer table{border-collapse:collapse;} in der CSS, und dann cell-padding="0" und cell-spacing="0" im HTML-Format sowieso zu setzen.

Answer 7

Heute sollten Sie die HTML5 Doctype verwenden, wenn Sie Fragen über Grenzen der Breite Stil die CSS sehen das Element hinzugefügt wird selbst sind mit: Box-Sizing

border-box - umfassen Grenze Breite/Höhe und padding Breite/Höhe oder im wesentlichen die Breite Sie Set enthält die Grenzen/padding

Inhalt-box - die Breite Sie auf dem Element nur gesetzt, der Inhaltsbereich ist, schließt dies nicht die Wattierung oder Grenzen

Es gibt auch eine Padding-Box, die ich nicht benutze, normalerweise reichen die obigen zwei aus.

Jetzt denke ich, IE8 verwendet eine andere Box-Sizing als Chrome/FF usw., deshalb manchmal haben Sie Probleme. Sie können immer debuggen und überprüfen, auf was die Box-Sizing eingestellt ist.

Hinweis: wenn Sie die DOCTYPE nicht dann im Quirks-Modus sind, und IE unterscheidet WILD von Chrome/FF auf der Box-Sizing/Box-Modell - und das ist Ihr Problem genau dort