Die Verwendung des XHTML+CSS-Frameworks bietet viele Vorteile, aber es gibt tatsächlich einige Probleme, die auf Unerfahrenheit oder unklares Denken zurückzuführen sind. Ich werde zunächst einige der Probleme aufschreiben, auf die ich gestoßen bin, um allen die Suche zu ersparen.
1. Die Interpretation des BOX-Modells in Mozilla Firefox und IE ist inkonsistent, was zu einem Unterschied von 2 Pixeln führt. Lösung:
div{margin:30px!important;margin:28px;}
Beachten Sie, dass die Reihenfolge dieser beiden Ränder nicht umgekehrt geschrieben werden darf. Laut Ajie! Das wichtige Attribut wird vom IE nicht erkannt, andere Browser jedoch schon. Daher wird es im IE tatsächlich so interpretiert:
Wenndiv{maring:30px;margin:28px}
wiederholt definiert wird, wird das letzte ausgeführt, sodass Sie nicht einfach margin:XXpx!important
2 schreiben können. Die BOX-Interpretation von IE5 und IE6 sind unter IE5 inkonsistent. div{width:300px;margin:0 10px 0 10px;}Die Breite des Div wird als 300px-10px (rechte Auffüllung)-10px (linke Auffüllung) interpretiert div beträgt 280 Pixel, während die Breite in IE6 und anderen Browsern wie folgt berechnet wird: 300 Pixel + 10 Pixel (rechte Polsterung) + 10 Pixel (linke Polsterung) = 320 Pixel. Zu diesem Zeitpunkt können wir die folgenden Änderungen vornehmen:
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
Ich verstehe nicht ganz, was dieses /**/ ist, ich weiß es nur IE5 und Firefox werden beide unterstützt, aber IE6 unterstützt es nicht. Wenn es jemand versteht, lassen Sie es mich bitte wissen. :)
3. Das ul-Tag hat in Mozilla standardmäßig einen Padding-Wert, aber im IE hat nur margin einen Wert, daher
kann es die meisten Probleme lösen,
indem man es zuerst definiert:ul{margin:0;padding:0;}
.4. In Bezug auf Skripte wird das Sprachattribut in xhtml1.1 nicht unterstützt. Sie müssen nur den Code ändern in:
Das ist es.
5. Wenn Sie die Richtungen von float und text-align im BOX-Container gleich festlegen:
{float:left;text-align:left;margin:0 0 0 200px;}
können wir die folgenden Änderungen vornehmen:
{float :left; text-align:left;margin:0 0 0 200px;display:inline;}