Causes and solutions for browser incompatibility such as IE6, IE7, and FF

The incompatibility of browsers must be terrible. We often just fix it, but forget the more important thing, that is, tracing the root cause to avoid the occurrence of similar incompatibility. I will summarize the following HTML encoding elements:

1.TextThe size is not compatible. It is also the font-size: 14px text. The space occupied by different browsers is different. The actual space occupied by IE is 16 PX, and the space reserved by IE is 3px. The actual height occupied by FF is 17px, when 1px is left White and 3px is left white, it is different in opera. Solution: Set line-height for text. Make sure that all text has the default line-height value. This is important. We cannot tolerate 1px differences in height.

2. FFThe container height is limited, that is, after the container defines the height, the shape of the container border is determined, and content is not supported, while content is supported by IE, and the height limit is invalid. Therefore, do not easily define the height for the container.

3. Also discussedThe content breaks through the container problem. If the float container has no defined width, the content in FF will be as wide as possible, and the content in IE will be folded first. Therefore, the width of a floating container with broken content needs to be defined.

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

A.<Div style = "border: 1px solid red; Height: 10px"> </div>B.<Div style = "border: 1px solid red; width: 10px"> </div>

C.<Div style = "border: 1px solid red; float: Left"> </div>D.<Div style = "border: 1px solid red; overflow: hidden"> </div>

The above code is different in different browsers. The experiment originated from the application of Div with a small height value. <Div style = "height: 10px; overflow: hidden"> </div>, the small height value must be used with overflow: hidden. The experiment is just fun. It is worth noting that the browser's interpretation of the container's boundaries is very different, and the impact of container content varies.

4. FloatingAnd FF does not clear floating.

Correct everyone's misunderstanding. If we encounter incompatibility, it is wrong to say that FF is bad. In fact, it is more often that the strange performance of IE makes us feel at a loss. The following lists all the flaws of Internet Explorer 6.

5. Most quiltHate, double-margin bug. In IE6, the actual effect of defining margin-left or margin-right for floating containers is twice that of the value. Solution: Define the display: Inline for the floating container.

6. MirrorMargin bug. When a float element exists in an outer element, if the outer element defines margin-top: 14px, margin-bottom: 14px is automatically generated. Padding also has similar problems, all of which are special products under ie6. the appearance of such bugs is more complicated, far from being a condition of this kind of appearance, and it has not been systematically organized yet. Solution: Set border or float for the outer element.

Extended: FF and IE have different interpretations of the margin-bottom and padding-bottom of the container, which seems to be related to this.

7. SwallowPhenomenon. I will not expand it if it is limited to space. In IE6, there are two divs up and down, and the DIV above sets the background, but it is also found that the DIV with no background is set below also has the background, which is swallowed up. Corresponding to the above background swallowing phenomenon, there is also the phenomenon of scrolling down the border is missing. Solution: Use ZOOM: 1. This Zoom is designed to solve the IE6 bug.

8. NotesIt can also generate bugs ~~~ "An extra pig ." This is the document used by our predecessors to summarize this bug. in IE6's bug, you will see two pig characters on the page, and the repeated internal capacity varies depending on the number of comments. Solution: Use "<! -[If! IE]> picrotate start <! [Endif]-> "method to write comments.

9. <li/> Add float <DIV/>, which is a typical and tricky compatibility problem. We hope to give different explanations to different Li attributes, FF's explanation is a bit understandable. The explanation in IE6 will make you confused. Due to the complexity of the problem, I will discuss it in another article. There are some achievements in the article "UL's experience in use", but there is no process to solve the problem.

10. UseThe strange expression of UL of "float: Left; display: inline. We can see that this CSS is added with the display: Inline for the double margin bug in IE6, which is also an important part of my CSS system, this article describes how to use ul. The use of CSS On UL will make you suffer. Click here.

11. imgFor the following code:

<Div>

</Div>

Open the border of the DIV and you will find thatImageThe bottom is not close to the bottom of the container. It is caused by a blank character behind the IMG. To eliminate this, it must be written in this way.

<Div>
</div>

The next two labels are important. This bug still exists in IE7. Solution: Set display: Block for IMG.

12. LostLine-height. <Div style = "line-Height: 20px"> text </div>. Unfortunately, the line-Height Effect of the single line in IE6 disappears ..., the reason is that the inline-block element is written together with the inline element. Solution: float the IMG and text.

Extended:You know that IMG align has text-top, middle, and absmiddle. You can try to adjust IMG and text so that they can be consistent in IE and ff, you will not be satisfied with the call. Simply float the IMG and text, and adjust it with margin.

13. Links. A: hover IMG {width: 300px} when we want the mouse to hover, the image width contained in the link changes. Unfortunately, it is invalid in IE6 and valid in IE7 and ff.

14. Non-Link. The style IE6, such as Div: hover {}, is not recognized, and is effective only in IE7 and ff.

15. BlockThe a link, which is nested in the absolute layer, where IMG and IE are placed in the absolute layer. If you click IMG with the mouse, the link will not work, and FF and op will work normally.

I can't think of it. I want to add more in the future. If you have mastered many of the above problems, 90% of the incompatibility issues do not need to start CSS hack.

16. NoFloat to be completely cleared. If the Li in UL has the float attribute, how can we clear the floating Li? <Ul> <li class = "C"> </LI> </ul> or <ul> <li> <div> class = "C"> </div> </LI> </ul> or <ul> <li> </LI> <div> class = "C"> </div> </ul> or <ul> <LI> </ul> <div> class = "C"> </div> or the preceding combination? I cannot answer this question. The following is an example.

<! 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>
<Div class = C> </div>
<Div class = BD style = margin-top: 19px> sfsdfsfdf </div>

Test in IE. Just change margin-top: 19px to margin-top: 20px. What did you find? Element: doctype must be available. In IE6 and IE7, margin-top: 19px is still good. There is a problem with margin-top: 20px, which cannot be explained... You can also test the clear layer in different locations.

Solution: Zoom: 1 for UL attributes (adding ZOOM: 1 to Li is useless)

Extended: the clear layer should be used independently.You may put the clear attribute directly in the following content layer to save the code. The problem is that not only FF and OP lose the margin effect, but some margin values in IE will also become invalid.
<Div style = "Background: red; float: Left;"> DD </div>
<Div style = "clear: Both; margin-top: 18px; Background: Green"> FF </div>

17. Under IEOverflow: hidden is invalid for Absolute layer position: absolute or relative layer position: relative. Solution: Add position: relative or position: absolute to overflow: hidden. In addition, IE6 supports the features of overflow-X or overflow-y, whereas IE7 and FF do not.

18. IE6Serious BUG: If the float element does not define the width, if the DIV defines the height or ZOOM: 1, The DIV will fill the whole line, even if you give the width. If a float element is used as a layout or a complex container, it must be given a width.

19. IE6The absolute positioning Div contains the relatively positioned Div. If the specific value of the DIV height is given to the inner layer, the inner layer will have a width value of 100%, the outer Absolute layer will be extended. The solution gives the internal layer the float attribute.

20. IE6If

21. FinallyIt has a disadvantage of ff. Width: 100% this is very convenient to use in IE. It will search for the width value layer up, ignoring the influence of the floating layer. FF searches until the floating layer ends, you can only add width: 100% to all floating layers in the middle. Tired. Opera is a good tool for IE.