Heim > Web-Frontend > CSS-Tutorial > Unterschiede in Padding und Marge zwischen Browsern_Erfahrungsaustausch

Unterschiede in Padding und Marge zwischen Browsern_Erfahrungsaustausch

WBOY
Freigeben: 2016-05-16 12:09:08
Original
1919 Leute haben es durchsucht

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
}


Unterschiede in Padding und Marge zwischen Browsern_ErfahrungsaustauschKlein
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage