Analysis of causes of css browser incompatibility

This article mainly introduces the analysis of the reasons for CSS browser incompatibility. It has certain reference value. Now I share it with you. Friends in need can refer to

Browser incompatibility, everyone They must all be deeply disgusted. Often we just make repairs, but forget the more important thing, which is to trace the root cause and avoid similar incompatibilities from happening again.

Now, let me summarize some html coding elements, hoping to give you some guidance:
1. The size of the text itself is incompatible. The same Song-style text with font-size: 14px occupies different space in different browsers. Under IE, it actually occupies 16px in height and 3px in the bottom margin. In FF, it actually occupies 17px in height, 1px in the top and 1px in the bottom. White 3px, it will be even different under opera. Solution: Set line-height for text. Make sure all text has a default line-height value. This is important, we cannot tolerate a 1px difference in height.

2. The container height is limited under ff, that is, after the container defines the height, the shape of the container border is determined and will not be expanded by the content. However, under ie, it will be expanded by the content, and the height limit is invalid. So don't easily define height for the container.

3. We also discussed the problem of content breaking the container, horizontally. If the float container has no defined width, the content under ff will stretch the width of the container as much as possible, and under ie, priority will be given to content wrapping. Therefore, floating containers whose contents may burst need to define width.

Small experiment: If you are interested, you can take a look at this experiment. Test each of the following codes in different browsers.

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

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

The above code is different in different browsers. The experiment originated from the use of small height value p,

, small height values ​​should be used together with overflow:hidden. The experiment is just for fun. What I want to point out is that browsers have very different interpretations of container boundaries, and the impact of container content varies.

4. Clearing floats. It is not possible to clear floats under ff.

To correct everyone’s misunderstanding, it is wrong to say that ff is bad when encountering incompatibility. In fact, it is more often the strange behavior of ie that makes us at a loss. The following lists the various misdeeds of ie6.

5. The most hated thing is the double-margin bug. Define margin-left or margin-right for a floating container under IE6. The actual effect is twice the value. The solution is to define display:inline for the floating container.

6.mirrormargin bug, when there is a float element in the outer element, if the outer element defines margin-top:14px, margin-bottom:14px will be automatically generated. Similar problems will also occur in padding, which are all specialties under IE6. The situations in which this type of bug occurs are more complicated. It is far more than just this kind of occurrence condition, and it has not been systematically sorted out. Solution: Set border or float on the outer element.

Extension: The interpretation of margin-bottom and padding-bottom of the container under ff and ie are sometimes inconsistent, which seems to be related to this.

7. Due to space limitations, I will not expand on the phenomenon of swallowing. It's still IE6, there are two p's up and down. The upper p sets the background, but it is found that the lower p that does not have a background also has a background. This is the phenomenon of swallowing. Corresponding to the background swallowing phenomenon above, there is also the phenomenon of missing borders under scrolling. Solution: Use zoom:1. This zoom seems to be specially designed to solve ie6 bugs.

8. Comments can also cause bugs~~~ "An extra pig." This is the copy used by previous people to summarize this bug. Under this bug in IE6, everyone will see the word pig on the page. Appears twice, the amount of repeated content varies depending on the number of comments. Solution: Use the " picRotate start " method to write comments.

9.

Riga float

, this is a typical and difficult compatibility issue. I hope everyone will pay attention to it. Different attributes of li will have different interpretation effects. , the explanation under ff is slightly understandable, but the explanation under ie6 will make you confused. Due to the complexity of the problem, a separate article will be dedicated to discussing this issue. There are relevant results in the article "ul usage experience", but the process of solving the problem is not given.

10. The strange behavior of ul using "float:left;display:inline". It can be seen that this css is added to display:inline in response to the double margin bug under ie6. This is also an important part of my css system. It is explained in the article "Using Experience of ul". And this css will make you miserable when used on ul. That’s it for now, I can’t say much more here.

11. Leave a blank space under the img. Let’s see what’s wrong with this code:

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

Open the border of p, and you will find that the bottom of the image is not close to the bottom of the container. , is caused by the blank characters after img. To eliminate it, you must write like this

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

The following two tags must be next to each other. This bug still exists under ie7. Solution: Set display:block to img.

12. Lose line-height.

Text

Unfortunately, the line-height effect of a single line of text disappears in IE6. . . , the reason is that the inline-block element and the inline element are written together. Solution: Make both img and text float.

引申：大家知道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呢？

或者

• class=”c”>

或者

class=”c”>

或者

class=”c”>

或者上述的组合？这个问题，我无法给出解答。下面有个例子与此相关

<!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值也会失效

dd

ff

 

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，内有的情况下，position:relative层下的float层内文字无法选中。这个bug迫使我修公用样式库。 

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

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

相关推荐：

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

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

The above is the detailed content of Analysis of causes of css browser incompatibility. For more information, please follow other related articles on the PHP Chinese website!