Rand und Polsterung können immer verwendet werden, aber wie können die verursachten Probleme gelöst werden? Weil Browser Containerbreiten unterschiedlich interpretieren:
IE 6.0 Firefox Opera usw. sind
echte Breite=Breite+Padding+Rahmen+Margin
IE5.X
echte Breite=width-padding-border-margin
Die Lösung lautet:
div.content {
width:400px; //Dies ist die falsche Breite, alle Browser lesen es
voice-family: ""}" //IE5.X/win ignoriert es Inhalt danach ""}""
voice-family:inherit;
width:300px //Einige Browser, einschließlich IE6/win, lesen diesen Satz und der neue Wert (300px) überschreibt ihn. Alt
}
html> ;body .content { //html>body ist in CSS2 geschrieben
width:300px //Browser, die CSS2 (nicht IE5) unterstützen, haben das Glück, diesen Satz zu lesen
}
div.content {
width:300px !important; //Dies ist die richtige Breite, die das !important-Tag unterstützt.
width (space)/**/:400px ; //IE6/win analysiert diesen Satz nicht, daher denkt IE6/win immer noch, dass der Wert von width 300px beträgt; während IE5.X/win diesen Satz liest, überschreibt der neue Wert (400px) den alten aufgrund des !important tag Es funktioniert bei ihnen nicht
}
html>body .content { //html>body ist in CSS2 geschrieben
width:300px; //Browser, die CSS2 unterstützen, haben das Glück, diesen Satz zu lesen
}