css多浏览器见兼容（CSS multi browser compatible）.doc

css多浏览器见兼容（CSS multi browser compatible） CSS has a high value for browser compatibility, and IE and Firefox typically have a lot of parsing differences. Heres the compatibility point. Common compatibility issues: 1.DOCTYPE affects CSS processing 2.FF: div sets margin-left, margin-right is auto, centered, IE not When 3.FF: body sets text-align, div needs to set the margin: auto (mainly margin-left, margin-right) to be centered After 4.FF: sets padding, div adds height and width, but IE doesnt, so it needs to be used. Important, set one more height and width 5.FF: support, important, IE ignores, available. Important sets the style for FF in particular 6.divs vertical centering problem: vertical-align:middle; increases the row spacing to the same height as the DIV; line-height:200px then inserts the text and centers vertically; the disadvantage is to control the content without line feed 7.cursor: pointer can display cursor fingers in IE FF at the same time, and hand is only IE The 8.FF: link adds borders and background colors. You need to set display: block and set float: left to ensure no line breaks. Referring to menubar, set the height of the A and menubar to avoid the bottom display dislocation. If you do not have height, you can insert a space in the menubar. 9., the BOX model in Mozilla, Firefox, and IE explains inconsistencies that lead to a phase difference 2px solution: Div{margin:30px! Important; margin:28px;} Note that the order of the two margin must not write, according to hatier saying! The important property IE does not recognize, but other browsers can be identified. So, in IE, its actually explained like this: Div{maring:30px; margin:28px} Repeated definitions follow the last one, so you cant just write margin:XXpx! Important; The BOX interpretation of 10.IE5 and IE6 does not agree IE5 Div{width:300px; margin:0 10px 0 10px;} The width of div is interpreted as 300px-10px (right padding), -10px (left padding), and finally div is 280px in width, while in