1. CSS-HACK
Die folgenden zwei Methoden können heute fast alle HACKs lösen.
1, !important
Mit der Unterstützung von IE7 für !important, ! Methode ist jetzt nur für IE6 HACK. (Achten Sie auf die Schreibweise. Denken Sie daran, dass die Deklarationsposition im Voraus angegeben werden muss.)
2, IE6/IE77 für Firefox
*+html und *html sind IE-spezifische Tags, die von Firefox nicht unterstützt werden. Und *+html ist ein IE7-spezifisches Tag.
#wrapper { #wrapper { width: 120px;} *html #wrapper { width: 80px;} *+html #wrapper { width : 60px;} } Hinweis: *+html HACK für IE7 muss sicherstellen, dass oben im HTML die folgende Anweisung steht: 2. Universeller Float-Abschluss Informationen zum Prinzip des Clear Float finden Sie in [So löschen Sie Floats ohne strukturelles Markup] Fügen Sie den folgenden Code zu Global CSS hinzu und fügen Sie class= hinzu „clearfix“ für das Div, das geschlossen werden muss. 3. Weitere Kompatibilitätstipps 1. Das Festlegen der Auffüllung eines Div unter FF führt zu einer Vergrößerung der Breite und Höhe, aber IE Nr. (kann mit !important gelöst werden) 2, Zentrierungsproblem 1) Vertikal zentriert. Stellen Sie die Zeilenhöhe auf die gleiche Höhe wie das aktuelle Div ein und verwenden Sie dann Vertical-Align: Middle. (Achten Sie darauf, den Inhalt nicht umzubrechen.) 2). margin: 0 auto;(Natürlich ist es nicht allmächtig) 3. Wenn Sie dem Inhalt im a-Tag Stile hinzufügen müssen, müssen Sie display: block; (häufig in Navigations-Tags) festlegen > Lassen Sie uns im Detail über die beiden Elemente Block und Inline sprechen. Die Eigenschaften des Blockelements sind: Es beginnt immer in einer neuen Zeile und die Höhe, Breite, Zeilenhöhe und Ränder können alle gesteuert werden (Blockelement). ); die Eigenschaften des Inline-Elements sind: :In derselben Zeile wie andere Elemente,...unkontrollierbar (Inline-Elemente); #box{ display:block; //Kann Inline-Elemente als Blockelemente simulieren display:inline; // Um den Effekt der Anordnung in derselben Zeile zu erzielen, diplay:table; IE erkennt die Definition von min- nicht, behandelt aber tatsächlich normale Breite und Höhe, als ob es min wäre . Dies führt zu einem großen Problem. Diese beiden Werte ändern sich in einem normalen Browser nicht Unter IE wird sich überhaupt nichts ändern. Breite und Höhe einstellen. Wenn Sie beispielsweise ein Hintergrundbild festlegen möchten, ist diese Breite wichtiger. Um dieses Problem zu lösen, können Sie Folgendes tun: #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;} 6 页面的最小宽度 min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个， 而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个 然后CSS这样设计： #container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );} 第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。 7 清除浮动 .hackbox{ display:table; //将对象作为块元素级的表格显示}或者.hackbox{ clear:both;} 或者加入:after（伪对象）,设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie 浏览器支持， 所 以并不影响到IE/WIN浏览器。这种的最麻烦的......#box:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden;} 8 DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距. #box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键} HTML代码 9 属性选择器(这个不能算是兼容,是隐藏css的一个bug) p[id]{}div[id]{} 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用 属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的. 10 IE捉迷藏的问题 当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。 有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性或者给#layout使用固定高和宽。页面结构尽量简单。 11 高度不适应 高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用 margin 或paddign 时。 例： p对象中的内容 CSS: #box {background-color:#eee; 🎜> Die folgende Methode ist eine Analysemethode aus einer anderen Perspektive:
也可以直接写成:
#container{ min-width:600px; *width:600px;}
这样就达到不管IE还是FF都是最小宽度为600PX了
Eine Zusammenstellung (Teil) von Browser-BUG-Behandlungsmethoden für Freunde, die gerne Webdesign teilen:
1. Asterisk*
IE kann es * erkennen, Standardbrowser wie FF können * nicht erkennen.
Beispiel: p { color:yellow; *color:red;}
Ähnliche sind
+ Pluszeichen
Nur IE interpretiert
p{color:red; +color:blue 🎜> IE zeigt Blau an und FF zeigt Rot an
2.!important
IE6 und niedrigere Versionen ignorieren diesen Stil, IE7 FF unterstützt ihn;
p{color:red !important;color:yellow;}
IE7 FF zeigt Rot an, IE6 Gelb
Beachten Sie hier, dass die !important-Methode nur von IE6 und darunter ignoriert wird, nachdem das obige Format befolgt wurde. Andere Methoden zur Erhöhung der Stilgewichtung können universell verwendet werden.
3. Unterstreichen.
IE6 und niedriger verwenden diesen Stil, andere ignorieren ihn
p{color:red _color:blue🎜>4 können in IE6 angewendet und angezeigt werden, werden jedoch in IE5 und niedriger nicht verarbeitet, sodass sie für IE5/6 unterschieden werden können
5 besteht darin, den Wert in der URL in Anführungszeichen zu setzen, wie unten gezeigt @IMPORT URL("newstyle.css"); diese Verwendung kann von Browsern über IE5 und FF unterstützt werden, wodurch die separate Verarbeitung von IE4-Stilen realisiert wird.
In Darüber hinaus gibt es eine weitere Methode:
@IMPORT URL("noie.css") screen;
Screen ist eine Option zur Angabe des Gerätetyps, screen wird für die Bildschirmanzeige verwendet, print wird für die Druckgeräteanzeige verwendet, Der IE unterstützt diese Methode jedoch nicht und alle IE-Browser können zwischen IE und FF unterscheiden.
6. Attributselektor: Wird verwendet, um Objekte mit bestimmten Attributen auszuwählen
span[class=left]{color:blue}
span[title]{color:red;}
IE6 Es wird nicht unterstützt , aber es funktioniert normal in FF, sodass IE und FF separat verarbeitet werden können.
In der tatsächlichen Entwicklung ist es häufig erforderlich, IE und FF separat zu verarbeiten. Sie können den folgenden Code verwenden:
#content{
color:red;
}
[xmlnx] #content{
color:blue
}
Ich finde diese Methode sehr praktisch und wird bei Bedarf oft verwendet . Ich kann weitere Details posten.
7. Unterobjektauswahl:
span>p{color:red🎜> IE6 unterstützt es nicht und kann auch zur Unterscheidung von IE und FF verwendet werden
#content{ COLOR: Blue;
Voice-Family: ""} "" ";
Voice-Family: Inherit;
COLOR: Red;
}
Der Code oben Verwendet Voice- Die folgende Farbe: Rot nach der Familie wird von IE5.5-Browsern und niedrigeren Browsern nicht analysiert. Daher wird die Textfarbe in IE6/7/FF-Browsern rot und in IE5.5-Browsern und niedrigeren Browsern angezeigt 🎜> Darüber hinaus gibt es noch eine andere Möglichkeit, mit der Sprachfamilie umzugehen:
#content{
color:red;
voice-family:"}"
color :blue;
}
Bei Verwendung dieser Methode wird der Text in IE6- und niedrigeren Browsern und FF-Browsern rot angezeigt, während IE5 und niedrigere Browser blau angezeigt werden!
9. Escape-Attribut
p{width:200px;}
IE5.5 und niedriger werden ignoriert. Hinweis: Das Backslash-Zeichen darf nicht vor 0-9 oder den Buchstaben a-f stehen
10. Bedingte Kommentare im IE
1. Einführung in bedingte Kommentare
Bedingte Kommentare in der IE-Version (Bedingte Kommentare) von IE Es verfügt über eine hervorragende Unterscheidung Fähigkeit von IE und Nicht-IE und ist eine häufig verwendete
Hackmethode im WEB-Design.
Bedingte Kommentare können nur in IE5 und höher verwendet werden.
Wenn Sie mehrere IEs installiert haben, basieren die bedingten Kommentare auf der höchsten Version des IE.
Die Grundstruktur von bedingten Kommentaren ist die gleiche wie bei HTML-Kommentaren (). Daher werden sie von anderen Browsern als dem IE als gewöhnliche
-Kommentare behandelt und vollständig ignoriert.
IE verwendet die if-Bedingung, um zu bestimmen, ob der Inhalt im bedingten Kommentar wie normaler Seiteninhalt analysiert werden soll.
2. Bedingte Kommentarattribute
gt: größer als, wählen Sie eine Version über der bedingten Version aus, mit Ausnahme der bedingten Version
lt: kleiner als, wählen Sie eine Version unter der bedingten Version aus, mit Ausnahme der bedingten Version
gte: größer oder gleich, wählen Sie eine Version über der bedingten Version aus, einschließlich der bedingten Version
lte: kleiner oder gleich, wählen Sie eine Version unter der bedingten Version aus, einschließlich der bedingten Version
: Wählen Sie alle Versionen aus außer der bedingten Version, unabhängig von hoch oder niedrig
drei , So verwenden Sie bedingte Kommentare
Achten Sie darauf, das <> im Code durch das entsprechende Größer- oder Kleiner-als-Zeichen in Englisch zu ersetzen
< !--[if IE 5]> Nur sichtbar in IE5.5
;
Der folgende Code ist ein bedingter Kommentar, der unter Nicht-IE-Browsern ausgeführt wird
Sie verwenden Internet Explorer Version 6 oder einen Nicht-IE-Browser
