Cause Analysis and Solution of CSS browser incompatibility page 1/2

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. 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 extended by the content, while the content will be extended under IE, the height limit is invalid. Therefore, do not easily define the height for the container.

3. We also discussed the problem of breaking the container horizontally. 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. 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. 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 ~~~ "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. 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.