css compatibility issues

1. It is the problem of double margins in ie6. In the case of using float, double margins will appear whether it is left or right. The easiest solution is to use display:inline; to add it to css.
2. The size of the text itself is not compatible. The same is the font-size: 14px of the font-size: 14px, the space occupied by different browsers is different, the actual height under ie is 16px, the lower space is 3px, the actual height under ff is 17px, the upper space is 1px, and the lower space is left. White 3px, even more different under opera. Solution: Set line-height to text. Make sure all text has a default line-height value. This is important, we cannot tolerate a 1px difference in height.
3. Under ff, the height of the container is limited, that is, after the height of the container is defined, the shape of the container border is determined and will not be enlarged by the content, while under ie, it will be enlarged by the content, and the height restriction will be invalid. So don't easily define height for the container.
4. Also discusses the issue of content bursting containers, 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, the content will be wrapped first. Therefore, a floating container whose content may burst needs to define a width.
5. To clear the floating, it is impossible to clear the floating under ff.
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 with padding, which are all special products under ie6. The situation of such bugs is more complicated, and it is far from only this one condition, and it has not been systematically sorted out. Solution: Set border or set float on the outer element.
7. The phenomenon of devouring, due to space limitations, I will not expand it. Or ie6, there are two divs up and down, the upper div sets the background, but it is found that the div below without the background also has the background, which is the phenomenon of swallowing. Corresponding to the above background swallowing phenomenon, there is also the phenomenon of missing scrolling lower borders. Solution: Use zoom:1. This zoom seems to be born specifically to solve the ie6 bug.
8. Comments can also generate bugs~~~ "an extra pig." This is the copy used by predecessors to summarize this bug. Under this bug in ie6, you will see the word pig appear twice on the page, repeating The amount of content varies with the amount of annotations. Solution: Write comments with "<!–-[if !IE]><!--> picRotate start <!--<![endif]-->" method.
9. <li/> Riga float <div/>, this is a typical and tricky compatibility problem, I hope everyone will face it, different attributes of li will have different interpretation effects, the explanation under ff is slightly understandable, ie6 The explanation below will leave you scratching your head, and due to the complexity of the problem, a separate article will be devoted to this issue. There are relevant results in the article "ul experience in using", but the process of solving the problem is not given.
10. Space under img. Solution: Set display:block to img.
11. Lose line-height. <div style=”line-height:20px”><img />text</div>, unfortunately, the line-height effect of single-line text has disappeared under ie6. . . , the reason is that the <img /> inline-block element is written together with the inline element. Solution: Make img and text float.
12. The hover state of the link. a:hover img{width:
13. Unlinked hover state. The style of div:hover{} is not recognized by ie6, and only works under ie7 and ff.
14. Under ie, overflow:hidden is invalid for its 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, but ie7 and ff do not.
15. A serious bug in ie6, if the float element does not have a defined width, and if there is a div with height or zoom:1 defined inside, the div will occupy an entire line, even if you give the width. If float elements are used as layout or complex containers, they must be given a width.
16. The bug under ie6, the absolute positioning div contains the relative positioning div, if the inner relative positioning div has a specific height value, the inner relative layer will have a width value of 100%, and the outer absolute layer will be supported Big. The solution is to give the inner layer a float property relative to the layer.
17. A bug in ie6, when there is <base target=”_blank”/> in <head></head>, the text in the float layer under the position:relative layer cannot be selected.
18. Finally came a shortcoming of ff. Width: 100% is very convenient to use in IE. It will search for the width value layer by layer, ignoring the influence of the floating layer. ff will search down to the end of the floating layer. In this way, you can only add width: 100% to all the floating layers in the middle. Okay, I'm tired. Opera has learned to follow ie.