Different bugs in each Browser

I think that the first thing we should know is the bug in each browser. Then we can also use some hack to adjust IE 6 separately for different browsers. This is the most annoying IE and roaming effect. ff and OP are basically the same. in short, are you going to debug CSS with breakpoints? Code Looking at some of the collected information, you can see that the browser is not compatible with each other. We are always trying to fix it, but forget the more important thing, that is, tracing the root cause, avoid similar incompatibility issues. Next, I will summarize some HTML encoding elements. I hope you can tell us: 1. The size of the text itself 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. 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 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 should be used together 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. 11. IMG is left blank. Let's see what's wrong with this code: <div>  </div> open the border of the div, you 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 <div>  </div> followed by the two labels. 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 we want to change the image width in the link when the mouse hover is clicked. 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 the link, which is nested in the absolute layer. Put IMG in the absolute layer and put it under ie. clicking the IMG button will not work. 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. 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> <style type = text/CSS>. c. BD ul. ex ul. ex LI </style> <ul class = "ex"> <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: For ul attribute ZOOM: 1 (adding ZOOM: 1 to Li is useless) Extension: Clear layer should be used separately. You may put the clear attribute directly in the following content layer to save the Code. This is not only the loss of the margin effect in ff and OP, some margin values in IE will also be invalid <Div style = "Background: red; float: Left;"> DD </div> <Div style = "clear: both; margin-top: 18px; Background: Green "> FF </div> 17. overflow: hidden in 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. for a bug in IE6, an absolutely positioned Div contains a relatively positioned Div. If a specific value is given to the height of the DIV relative 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. in IE6, where