Häufige CSS-Fehler und Lösungen

Unterschied zwischen IE6 und FF: Hintergrund: orange; * Hintergrund: blau;
Unterschied zwischen IE6 und IE7: Hintergrund:grün !wichtig;Hintergrund:blau;
Unterschied zwischen IE7 und FF: Hintergrund: orange; *Hintergrund: grün;
Unterschied zwischen FF, IE7, IE6: Hintergrund: orange; * Hintergrund: grün !wichtig; * Hintergrund: blau;
Kompatibel mit IE7 und IE8: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
1. CSS unterstützt in mehreren Browsern unterschiedliche Schlüsselwörter und die Browserkompatibilität kann wiederholt definiert werden!important kann von FireFox und IE7 erkannt werden* kann von IE6 und IE7 erkannt werden_ kann von IE6 erkannt werden*+ kann von IE7 erkannt werden
2. IE-spezifische bedingte Kommentare <!-- Andere Browser --> <link rel="stylesheet" type="text/css" href="css.css" /> <!--[if IE 7]> <!-- Geeignet für IE7 --> <link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]--> <!--[if lte IE 6]> <!-- Geeignet für IE6 und darunter --> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
3. Interpretation der tatsächlichen Pixel durch verschiedene Browser IE/Opera: tatsächliche Breite des Objekts = (Rand links) + Breite + (Rand rechts) Firefox/Mozilla: tatsächliche Breite des Objekts = (Rand links) + (Breite des linken Rahmens) + (Füllung links) + Breite + (Füllung rechts) + (Breite des rechten Rahmens) + (Rand rechts)
4. Problem mit der Mausgeste: Die Cursor-Eigenschaft von Firefox unterstützt nicht die Hand, sondern den Zeiger, während der IE beides unterstützt. Aus Kompatibilitätsgründen wird also der Zeiger verwendet.
5. Wenn Sie das Style-Attribut des HTML-Tags in FireFox festlegen, müssen alle Positions-, Breiten-, Höhen- und Größenwerte von px gefolgt werden. IE unterstützt diese Schreibmethode ebenfalls, sodass px-Einheiten einheitlich hinzugefügt werden. Beispiel: Obj.Style.Height = imgObj.Style.Height + 'px';
6. FireFox kann die verkürzten Einstellungen der Polsterungseigenschaft wie „padding 5px 4px 3px 1px“ nicht analysieren. Sie müssen in „padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px0“ geändert werden.
7. Wenn die Einrückung von ul, ol und anderen Listen entfernt wird, sollte der Stil wie folgt geschrieben werden: list-style:none;margin:0px;padding:0px; das margin-Attribut ist für IE gültig und das padding-Attribut ist für FireFox gültig
8. CSS steuert die Transparenz: IE: Filter: Progid: DXImageTransform.Microsoft.Alpha (Stil = 0, Deckkraft = 60); FireFox: Deckkraft: 0,6;
9. CSS steuert abgerundete Ecken: IE: unterstützt keine abgerundeten Ecken; FireFox: -moz-border-radius:4px; oder -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -moz-border-radius-bottomleft:4px; -moz-border-radius- bottomright:4px;
10. Doppellinien-Konkav- und Konvexrahmen von CSS: IE: Rahmen: 2px Anfang; FireFox: -moz-border-top-colors: #d4d0c8 weiß; -moz-border-left-colors: #d4d0c8 weiß; -moz-border-right-colors: #404040 #808080; -moz-border-bottom-colors: #404040 #808080;
11. IE unterstützt die CSS-Methode cursor:url() zum Anpassen von Cursorstildateien und Bildlaufleistenfarbstilen. FireFox unterstützt keine der oben genannten Methoden.
12. Der Internet Explorer weist einen Fehler auf, bei dem sich das Auswahlsteuerelement immer auf der obersten Ebene befindet und nicht alle CSS im Auswahlsteuerelement funktionieren.
13. IE unterstützt Label-Tags in Formularen, einschließlich Bildern und Textinhalten; FireFox unterstützt keine Labels, die Bilder enthalten. Durch Klicken auf das Bild werden das mit dem Label markierte Radio oder Kontrollkästchen nicht wirksam. 14. TextArea in FireFox unterstützt kein onScroll-Ereignis
15. FireFox unterstützt keine Inline- und Blockanzeige
16. Wenn Sie für Div die linken und rechten Ränder auf „auto“ setzen, ist es in FireFox bereits zentriert, in IE jedoch nicht.
17. Wenn FireFox die Textausrichtung für den Body einstellt, muss das Div den Rand: auto (hauptsächlich Rand-links Rand-rechts) so einstellen, dass es zentriert ist
18. Beim Festlegen von CSS-Stilen für Hyperlinks sollten Sie am besten die folgende Reihenfolge einhalten: LVHA. Das heißt, <style type="text/css"> <!-- a:link {} a:visited {} a:hover {} a:active {} --> </style> Dadurch kann verhindert werden, dass einige besuchte Hyperlinks keine Hover- und Active-Stile haben.
19. Um einen automatischen Zeilenumbruch für lange Absätze im Internet Explorer einzustellen, legen Sie in CSS word-wrap:break-word fest; in FireFox verwenden Sie die JS-Einfügungsmethode, um dies zu implementieren. Der spezifische Code lautet wie folgt: <script type="text/javascript"> /* <![CDATA[ */ function toBreakWord(el, intLen){ var obj=document.getElementById(el); var strContent=obj.innerHTML; var strTemp=""; while(strContent.length>intLen){ strTemp+=strContent.substr(0,intLen)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("div_id", 37); /* ]]> */ </script>
20. Nachdem Sie dem untergeordneten Container das Float-Attribut hinzugefügt haben, wird der Container nicht automatisch erweitert. Lösung: Fügen Sie ein CSS-Clear:Both hinzu, um das Float im nächsten Tag nach dem Tag-Ende zu löschen.
21. Nach dem Floaten interpretiert IE6 den äußeren Rand als doppelt so groß wie den tatsächlichen Rand. Lösung: Fügen Sie display:inline hinzu
22. Unter dem Bild in IE6 entsteht eine Lücke. Lösung: Fügen Sie display:block zum Bild hinzu oder setzen Sie die Eigenschaft vertical-align auf vertical-align:top | bottom | middle | text-bottom
23. Lösung für das Problem der Lücke zwischen zwei Ebenen in IE6: Stellen Sie das rechte Div ebenfalls auf „schwebend“ ein oder definieren Sie margin-right:-3px relativ zu IE6;
24. So zeigen Sie Auslassungspunkte an, wenn der Inhalt in LI die Länge <style type="text/css"> <!-- li { width:200px; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; } --> </style> überschreitet (gilt nur für IE)
25. Setzen Sie die Höhe und Zeilenhöhe des Elements auf den gleichen Wert, um den Text vertikal zu zentrieren <style type="text/css"> <!-- div { height:30px; line-height:30px; } --> </style>
26. Um Text am Texteingabefeld auszurichten, fügen Sie die Eigenschaftseinstellung vertical-align:middle; in CSS hinzu <style type="text/css"> <!-- … … vertical-align:middle; } --> </style>
27. Wenn ein Browser, der WEB-Standards unterstützt, einen festen Höhenwert festlegt, wird er nicht wie bei IE6 gestreckt. Aber was, wenn Sie eine feste Höhe festlegen und trotzdem strecken möchten? Die Lösung besteht darin, das Höhenattribut zu entfernen und eine Mindesthöhe festzulegen. Um mit IE6 kompatibel zu sein, der keine Mindesthöhe unterstützt, können Sie es wie folgt definieren: { height:auto!important; height:200px; min-height:200px; }
28. Lösung für das Problem, dass sich die Bildlaufleistenfarbe im Internet Explorer nicht in Webstandards festlegen lässt: Ändern Sie die Einstellung des Textkörpers in CSS in html <style type="text/css"> <!-- html { scrollbar-face-color:#f6f6f6; scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee; scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000; scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff; } --> </style>
29. IE6 kann aufgrund des Problems mit der Standardzeilenhöhe keinen Container mit einer Höhe von etwa 1px definieren. Lösung: Legen Sie den Container in CSS wie folgt fest: overflow:hidden | zoom:0.08 | line-height:1px
30. Durch Festlegen der Transparenzeigenschaft für Flash kann die Ebene über Flash angezeigt werden. <param name="wmode" value="transparent" /> <!-- Lösen Sie das Problem im Internet Explorer//> <embed wmode="transparent" …… > <!-- Lösen Sie das Problem im FireFox//>
31. FireFox erhöht die Attributwerte für Breite und Höhe entsprechend, nachdem das Attribut „Auffüllen“ festgelegt wurde, IE jedoch nicht. Lösung: Verwenden Sie die Methode !important, um einen zusätzlichen Satz von Höhe und Breite zu definieren
32. FireFox ignoriert Leerzeichen zwischen Divs, IE jedoch schon. Versuchen Sie daher, keine Leerzeichen oder Zeilenumbrüche zwischen zwei verbundenen Divs zu verwenden, da dies sonst zu Formatfehlern zwischen verschiedenen Browsern führen kann, wie z. B. der berühmten 3px-Abweichung. Und der Grund dafür ist schwer herauszufinden.
33. Im folgenden Format <div id="parent"> <div id="content"> </div> </div> Wenn der Inhalt groß ist, kann er in verschiedenen Browsern nicht automatisch gestreckt werden, selbst wenn das übergeordnete Element auf 100 % oder „Auto“ eingestellt ist. Die Lösung besteht darin, am unteren Rand der Ebene einen Abstand mit einer Höhe von 1 zu erstellen. Der Code lautet wie folgt <div id="parent"> <div id="content"> </div> <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div> </div>
34. IE und FireFox interpretieren die Schriftgröße von klein unterschiedlich, FireFox ist 13px, IE ist 16px
35. IE und FireFox interpretieren die Größe des Raums unterschiedlich, FireFox ist 4px, IE ist 8px