Analyse der Ursachen der Inkompatibilität von CSS-Browsern

Dieser Artikel stellt hauptsächlich die Analyse der Gründe für die CSS-Browser-Inkompatibilität vor. Er hat einen gewissen Referenzwert. Jetzt können sich Freunde in Not darauf beziehen Alle sind zutiefst angewidert. Oft führen wir einfach Reparaturen durch, vergessen aber das Wichtigere, nämlich die Ursache herauszufinden und zu verhindern, dass ähnliche Inkompatibilitäten erneut auftreten.

Ich möchte einige HTML-Codierungselemente zusammenfassen und hoffe, Ihnen eine Orientierung zu geben:

1. Die Größe des Textes selbst ist nicht kompatibel. Der gleiche Song-Stil-Text mit der Schriftgröße: 14px nimmt in verschiedenen Browsern unterschiedlichen Platz ein. Unter IE nimmt er tatsächlich 16px in der Höhe und 3px am unteren Rand ein, in FF tatsächlich 17px in der Höhe und 1px am oberen Rand 1px unten. Weiß 3px, unter Oper wird es noch anders sein. Lösung: Zeilenhöhe für Text festlegen. Stellen Sie sicher, dass der gesamte Text über einen Standardwert für die Zeilenhöhe verfügt. Das ist wichtig, wir können einen Höhenunterschied von 1 Pixel nicht tolerieren.

2. Die Containerhöhe ist unter ff begrenzt, das heißt, die Form des Containerrandes wird durch den Inhalt bestimmt um den Inhalt erweitert werden und die Höhenbeschränkung ungültig wird. Definieren Sie also nicht einfach die Höhe des Behälters.

3. Wir haben auch das Problem besprochen, dass der Inhalt den Container horizontal zerbricht. Wenn der Float-Container keine definierte Breite hat, dehnt der Inhalt unter ff die Containerbreite so weit wie möglich aus, und unter ie wird dem Inhaltsumbruch Priorität eingeräumt. Deshalb müssen schwebende Container, deren Inhalt platzen könnte, eine Breite definieren.

Kleines Experiment: Wenn Sie Interesse haben, können Sie sich dieses Experiment ansehen. Testen Sie jeden der folgenden Codes in verschiedenen Browsern.

a.<p style=”border:1px solid red;height:10px”></p> b.<p style=”border:1px solid red;width:10px”></p>

rrree
Der obige Code ist in verschiedenen Browsern unterschiedlich. Das Experiment entstand durch die Verwendung eines kleinen Höhenwerts p, 7daed35db6dc5da97163d8656a1a121b p>, ein kleiner Höhenwert sollte zusammen mit overflow:hidden verwendet werden. Das Experiment dient nur zum Spaß. Ich möchte darauf hinweisen, dass Browser Containergrenzen sehr unterschiedlich interpretieren und die Auswirkungen von Containerinhalten unterschiedlich sind.

4. Floats löschen Es ist unmöglich, Floats unter ff zu löschen.

Um das Missverständnis aller zu korrigieren: Es ist falsch zu sagen, dass ff schlecht ist, wenn wir auf Inkompatibilität stoßen. Tatsächlich ist es häufiger das seltsame Verhalten von ie, das uns ratlos macht. Im Folgenden sind die verschiedenen Missetaten von ie6 aufgeführt.

5. Der am meisten gehasste Bug mit doppelter Marge. Definieren Sie margin-left oder margin-right für einen Floating-Container unter IE6. Der tatsächliche Effekt ist doppelt so hoch. Die Lösung besteht darin, display:inline für den Floating-Container zu definieren.

6.mirrormargin-Fehler: Wenn das äußere Element ein Float-Element enthält und das äußere Element margin-top:14px definiert, wird automatisch margin-bottom:14px generiert. Ähnliche Probleme treten auch beim Auffüllen auf, was alles eine Spezialität von IE6 ist. Die Situationen, in denen diese Art von Fehler auftritt, sind weit mehr als nur diese Art von Auftretensbedingung und wurden nicht systematisch gelöst. Lösung: Legen Sie einen Rand oder einen Float für das äußere Element fest.

Erweiterung: Die Erklärungen zu margin-bottom und padding-bottom von Containern unter ff und ie sind manchmal inkonsistent, was damit zusammenzuhängen scheint.

7. Aus Platzgründen werde ich nicht näher auf das Phänomen des Schluckens eingehen. Es ist immer noch IE6, es gibt zwei ps nach oben und nach unten, aber es wurde festgestellt, dass das untere p, das keinen Hintergrund hat, auch einen Hintergrund hat. Dies ist das Phänomen des Verschluckens. Entsprechend dem oben beschriebenen Phänomen des Verschluckens des Hintergrunds gibt es auch das Phänomen fehlender Ränder beim Scrollen. Lösung: Zoom verwenden:1. Dieser Zoom scheint speziell für die Behebung von ie6-Fehlern konzipiert zu sein.

8. Kommentare können auch Fehler verursachen~~~ „Ein zusätzliches Schwein.“ Dies ist die Kopie, die von früheren Leuten verwendet wurde, um diesen Fehler in IE6 zusammenzufassen . Erscheint zweimal, die Menge des wiederholten Inhalts variiert je nach Anzahl der Kommentare. Lösung: Verwenden Sie die Methode „4499f6a8610053d8568717ec1441c42d picRotate start dbeaff94c2f1d72b0d673ef6e0c76b56“, um Kommentare zu schreiben.

9.f4eded972c7446ec3fad4550e77f2a65Riga float a6f776b766579c28d02706af09482172, das ist ein typisches und schwieriges Kompatibilitätsproblem. Ich hoffe, dass jeder darauf achtet. Verschiedene Attribute von li werden unterschiedliche Auswirkungen haben . Die Erklärung unter ff ist einigermaßen verständlich, aber die Erklärung unter ie6 wird Sie verwirren. Aufgrund der Komplexität des Problems wird dieser Frage ein eigener Artikel gewidmet. Im Artikel „UL-Nutzungserfahrungen“ gibt es relevante Ergebnisse, der Lösungsprozess des Problems wird jedoch nicht angegeben.

10. Das seltsame Verhalten von ul bei der Verwendung von „float:left;display:inline“. Es ist ersichtlich, dass dieses CSS als Reaktion auf den Double-Margin-Fehler unter ie6 hinzugefügt wurde. Dies ist auch ein wichtiger Teil meines CSS-Systems. Es wird im Artikel „Using Experience of ul“ erläutert. Und dieses CSS wird Sie unglücklich machen, wenn es auf ul verwendet wird. Das war's vorerst, viel mehr kann ich hier nicht sagen.

Das Leerzeichen unter 11.img, mal sehen, was mit diesem Code nicht stimmt:

c.<p style=”border:1px solid red;float:left”></p> d.<p style=”border:1px solid red;overflow:hidden”></p>

Öffnen Sie den Rand von p und Sie werden feststellen, dass der untere Rand des Bildes nicht dicht ist am Boden des Containers wird durch die Leerzeichen nach img verursacht. Um es zu beseitigen, müssen Sie Folgendes schreiben:

<p> 
<img src=”” src=”” /> 
</p>

Die folgenden beiden Tags müssen nebeneinander stehen. Dieser Fehler besteht immer noch unter ie7. Lösung: Stellen Sie display:block auf img ein.

12. Zeilenhöhe verlieren. ef0ea36cffc71e3e69e8d30932f7517c6ed09268cbdd0015bce8dcbbdfa9bfe4Text94b3e26ee717c64999d7867364b1b4a3 Leider verschwindet der Zeilenhöheneffekt einer einzelnen Textzeile in IE6. . . Der Grund dafür ist, dass das Inline-Block-Element und das Inline-Element zusammen geschrieben werden. Lösung: Lassen Sie sowohl das Bild als auch den Text schweben.

引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意。索性让img 和文字都 float起来，用margin 调整。 

13.链接的hover状态。a:hover img{width:300px} 我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在ie6下无效，ie7、ff下有效。 

14.非链接的hover状态。p:hover{} 这样的样式ie6是不认的，在ie7、ff下才有效果。 

15.block化的a链接，其内套absolute层，absolute层内放置img，ie下，鼠标点击img不会有链接效果，ff、op下正常。 

想不出来了，以后想到再加吧。上面的诸多问题如果你掌握了其中奥妙，90%的不兼容问题不需要另起css hack的。 

16.无法彻底清除的float。如果让ul下的li具有了float属性，如何clear浮动的li呢？ff6d136ddc5fdfeffaf53ff6ee95f185af75337a6c97830a646fbd872a63c031bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689 或者 ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6e388a4556c0f65e1904146cc1a846beeclass=”c”>94b3e26ee717c64999d7867364b1b4a3bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689 或者 ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6bed06894275b65c1ab86501b08a632ebe388a4556c0f65e1904146cc1a846beeclass=”c”>94b3e26ee717c64999d7867364b1b4a3929d1f5ca49e04fdcb27f9465b944689 或者 ff6d136ddc5fdfeffaf53ff6ee95f18525edfb22a4f469ecb59f1190150159c6bed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689e388a4556c0f65e1904146cc1a846beeclass=”c”>94b3e26ee717c64999d7867364b1b4a3 或者上述的组合？这个问题，我无法给出解答。下面有个例子与此相关

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> 
<style type=text/css> 
.c{clear:both;overflow:hidden;+overflow:visible} 
.bd{border:1px solid red} 
ul.ex{list-style:none;} 
ul.ex li{float:left;border:1px solid green;} 
</style> 
<ul class=ex> 
<li>sfsdfsfdf</li> 
<li>sfsdfsfdf</li> 
</ul> 
<p class=c></p> 
<p class=bd style=margin-top:19px>sfsdfsfdf</p>

请在ie下 测试，仅仅将 margin-top:19px 改为margin-top:20px 你发现什么了？要素：doctype必须有，ie6、ie7下margin-top:19px还好好的，margin-top:20px 就出问题了，无法解释。。。大家还可以将 clear 层换不同的位置测试。 

解决方案：给ul 属性zoom:1 （给li 加zoom:1 没用） 

引申：clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效
3f69495797ccc6f8a32815d7dd10c89add94b3e26ee717c64999d7867364b1b4a3
f9923316e20b96d9eaf8f1e87c8857a2ff94b3e26ee717c64999d7867364b1b4a3 

17.ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案：给overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。 

18.ie6下严重的bug，float元素如没定义宽度，内部如有p定义了height或zoom:1，这个p就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。 

19.ie6下的bug，绝对定位的p下包含相对定位的p，如果给内层相对定位的p高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。 

20.ie6下的bug，93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1内有05ebf4a056fdba313520357d9cd80571的情况下，position:relative层下的float层内文字无法选中。这个bug迫使我修公用样式库。 

21.终于来了个ff的缺点。width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。 

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

CSS透明opacity和IE各版本透明度滤镜filter的用法

关于webpack项目混用css module的方法

Das obige ist der detaillierte Inhalt vonAnalyse der Ursachen der Inkompatibilität von CSS-Browsern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!