doing front-end, compatibility, especially IE6 compatibility is a headache problem, the following collation of some common compatibility issues, for reference (most of the source network):
First, the usual good habits:
1 HTML document at the beginning of the document type life: DTD
2 CSS file at the beginning defines the default properties for various element tags:
An example *{border:none;margin:0;padding:0; font-family:simsun;font-weight:nonmal;text-align:left;}
Ul,li,ol{list-style:none;}
a:link{"'}
a:visited{}
a:hover{}
a:aciton{}
table{border-collapse:collapse;border-spacing:0px;}
3: For the parent element that needs to be stretched, remember to add it by default:
Used to recalculate the height of the container; 4 for elements that require a wide height, the habitual addition of Overflow:hidden is beneficial to the overall layout and will not deform. But pay attention to the integrity of the display, 5 for the text layout, you can give priority to text-align:center;line-height:10px;text-indent:10px, such attributes to control the center, indentation and other effects; 6 When you set the element Margin-top or-bottom, think of whether the parent element has a padding or border attribute, because the margin coincident with the IE6 is generated, and my habit is: set margin in one direction or padding;7 overflow: Hidden; I think it works. 8 attention to IE6 under the bilateral distance problem; float:left;margin-left:10px, the actual situation can be 20px, (display:inline) 9 IE6 3px problem, currently encountered not many , the use of 10:float, there will always be a layout problem (under IE6), generally I try to control the width of the element, can be determined, the cost is trouble, and obviously waste time to measure the width and height value; PS: Yes no? 11: Obviously suitable for the use of the form of the Do not use, (I have not done, and sometimes do the product list, also use Div); The following is the current CSS compatibility problem it (list): 1 IE6 bilateral according to, slightly, did not say 2 up and down margin coincident; condition: element exists in document flow, Set the properties of margin up/down; performance: The distance between the two elements is not the sum of the margin-top of the elements below the margin-bottom+, but one of the big one, with or minus time, the result for algebra and; solution: I am accustomed to use the same or the next; 3 The pseudo-class of the hyperlink does not conform to the expected reason: to follow the order: Link->visited->hover->active4 ie6,7 of the haslayout caused by the layout problems; see: http://blog.csdn.net/ chen943354086/article/details/450544535 line elements (span, p, etc.) up and down margin, padding invalid; I am accustomed to block;6 ul in the different performance of IE and FF: look at the network post has so summarized, I did not meet, it should be because I habitually padding and margin 0; Reason: ul in IE and FF under the default margin and padding different; 7 height can not be adaptive, container does not automatically expand, child elements do not open the parent element: most areBecause the child elements are floating, out of the document flow, and the parent element container considers his child elements to be empty in the document flow, the height is empty; Workaround: Append to parent element by default
8 img shows a gap problem
FIX: The Display:block will be set, then the width height. I think this can help prevent the image size is not qualified and caused by the layout deformation problem;
The height of 12px is still high when the height is set at 9 IE6.
Reason: Height under IE6 is the meaning of min-height, and 12px is basically the height of font-size;
Solution: I am font-size:0; (when there is no writing); Overflow:hidden;
Well, for the time being, pay attention to accumulate, not to be continued ...
CSS compatibility issues Summary-Solution
