CSS browser compatibility (ie6.0, ie7.0, and Firefox)

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. The text size is incompatible.

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. FF container height limit

After the container defines the height, the shape of the container border is determined, and the content will not be extended. in IE, the content will be extended and the height limitation will fail.

Therefore, do not easily define the height for the container.

3. The 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 code in different browsers.

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. Float cleanup. FF is not applicable if float is not cleared.

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. Double-margin bug, which is the most hated.

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. parse margin bug

When a float element exists in the 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. 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. Annotations can also generate bugs ~~~

"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/>

This is a typical and difficult issue of compatibility. I hope you will face it up and give different explanations to different properties of Li. The explanations under FF are slightly understandable, the explanation in IE6 will make you confused. Due to the complexity of the problem, we 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. Use UL's strange expression 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. white space under img

Let's see what's wrong with this Code:

<Div>

</Div>

Open the border of the DIV, and you will find that the bottom of the image is not close to the bottom of the container. It is caused by a blank character behind the IMG. To eliminate this, you must write it like this.

<Div>
</div>

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

12. Line-height is lost.

<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 align of IMG 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. The linked hover status.

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-Linked hover status.

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

15. Block-based a link

It is nested in the absolute layer, where IMG and IE are placed in the absolute layer. Clicking IMG with the mouse does not have the effect of linking. ff and OP are normal.

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. Float that cannot be completely cleared.

If the Li in UL has the float attribute, how can we clear the floating Li? <Ul> <li class = "C"> </ul> or <ul> <li> <div> class = "C"> </div> </ul> or <ul> <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> sfsdfsfdf <>
</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. overflow: hidden under IE 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. serious bug in IE6. 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. Bug in IE6

An absolutely positioned Div contains a relatively positioned Div. If a specific value of Div height is given to the inner layer, the inner layer has a width value of 100%, the outer Absolute layer will be extended. The solution gives the internal layer the float attribute.
If there is <base target = "_ blank"/> in head>

20. Finally, I came up with 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.