Common IE6 compatibility and css compatibility, and ie6 compatibility with css

Common IE6 compatibility and css compatibility, and ie6 compatibility with css

Although IE6 has basically disappeared abroad as the XP system exits, it still occupies a large market share in China. E-government websites and web games websites still need to consider the IE6 user experience. If your website uses "new technologies" such as CSS3, you must give up IE6 compatibility.

IE6 does not support sibling selectors and multi-class selectors. Be sure to pay attention when using them.

• Add default style in the browser

Problem:

Some browsers add default styles to browsers, and different styles are added to different browsers, resulting in different la s in different browsers.

Solution:

Clear the default style to ensure that different browser styles are consistent. (There are many good clear style templates in Baidu) The following are my favorite clear style files:

1 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, fieldset, button, input, textarea, th, td {margin: 0; padding: 0;}/* set the default font */2 body, button, input, select, textarea {/* for ie */font: 14px/1.5 arial, "Microsoft Yahei", "Hiragino Sans GB", sans-serif;/* is represented by ascii characters, no problem in any encoding. */} 3 h1 {font-size: 18px;/* 18px/12px = 1.5 */} 4 h2 {font-size: 16px ;} 5 h3 {font-size: 14px;} 6 h4, h5, h6 {font-size: 100%} 7 img {height: auto; vertical-align: middle; border: 0 none;} 8 address, cite, dfn, em, var {font-style: normal;}/* align italic to the right of X/9 code, kbd, pre, samp, tt {font-family: "Courier New", Courier, monospace;}/* uniform width font */10 small {font-size: 12px ;} /* Chinese characters smaller than 12px are hard to read, making small normalized */11 ul, ol {list-style: none ;} 12/* reset the text format element */13 a {text-decoration: none;} 14 abbr [title], acronym [title] {/* Note: 1. ie6 does not support abbr; 2. attribute selector is used here, which is ineffective in ie6 */border-bottom: 1px dotted; cursor: help;} 15 q: before, q: after {content :'';} 16/* reset form Element */17 legend {color: #000;}/* for ie6 */18 fieldset, img {border: none;}/* img: leave the img in the Link borderless */19/* Note: optgroup cannot reset */20 button, input, select, textarea {font-size: 100%; margin: 0; vertical-align: baseline;/* enables the form element to inherit the font size under ie */} 21 table {border-collapse: collapse; border-spacing: 0 ;} 22 hr {border: none; height: 1px;} 23/* display the vertical scroll bar by default in non-ie browsers to prevent flickering caused by the scroll bar */24 html {overflow-y: scroll;} 25 body {font: 14px/1.5 arial, "Microsoft Yahei", "Hiragino Sans GB", sans-serif; color: # 8C8C8C ;}

• Gap at the bottom of the img label

Problem:

The div contains an image, and the bottom may have 2px, 4px, or more gaps. Different font-size may affect the gap size.

Solution:

• Img has a blue border on IE

Problem:

Img label blue border after hyperlink (a tag) is added to IE6-IE10

Solution:

Img {border: 0 ;}

• Margin upper/lower margin merge

Problem:

At the same time, adding the up and down margins to the up and down containers will cause the margin merging problem (merge the maximum value)

Solution:

Do not give two margins at the same time, just give one.

• Margin-top is not added to the specified element.

Problem:

In the container, there is no desired effect for a sub-element margin-top.

Solution:

• IE6 double margin

Problem:

When a floating element is added with margin-left, IE6 will show double margins.

Solution:

Display the floating element: inline;

• When the child element is floating, the height of the parent element is 0.

Problem:

The height of the parent element is uncertain. When the child element floats, the height of the parent element changes to 0. If the floating child element level is higher than the parent element, the parent element cannot be opened.

Solution:

• A link has a blue border when clicked

Problem:

The a link has a blue border when clicked.

Solution:

a:focus { outline: none 0; }

• Li disappears automatically in IE6.

Problem:

If the block elements in li are floating in IE6, the default width is 100% instead of adaptive.

Solution: