Because the company project requirements are compatible to IE6, which encountered a lot of CSS compatibility issues, so in the blog summary down, later in the project encountered new compatibility issues, will also be updated here.
1.ie6 the Height property is invalidated
problem Description: under IE6, even if the block level element is set to a height, but if the content inside the element exceeds the set height, the inner content will open the block level element height, the height is invalid.
Workaround: set Overflow:hidden for the block-level element ;
2.div has a minimum height
problem Description: under IE6, block-level elements will exist about 13px default minimum height, even if the empty div tag or height property setting is smaller than 13px, this is because IE6 will default font-size:13px, even an empty div, will be stretched to show the minimum height of 13px.
Workaround: set font-size:0; or Overflow:hidden;
3.ie6 png picture background opaque
problem Description: under IE7, the PNG picture background is grayed out, not transparent.
Problem Solving: There are a number of workarounds, and I'll list only two of the things I use:
1. Use plug-ins to resolve the plug-in address and call method as follows:
<!--[if IE 6]><script src= "Http://img3.job1001.com/js/png.min.js" ></script>< Script>dd_belatedpng.fix ('. Head img,.nav_phone img,.search,.qq img '); </script><! [endif]-->
2. Save the picture in GIF format
The Position:absolute is set under 4.ie6, and the element is not displayed.
Problem Description: IE6, set up the Position:absolute; Elements may not be displayed for reasons that are not clear.
Problem Solving: add an empty div tag after the element,<div></div>
5.ie6 under Float:right; the element will wrap
Problem Description: IE6, the same line sets several elements float:left; If an element is set float:right, the element wraps.
Problem Solving: putting foat:right; Elements are placed at the front
6.IE6, line-height failure
Problem Description: IE6 under , the Line-height property fails when the text and IMG, input, textarea, select, and other elements are in the same container. The Line-height property is valid only if you have full text.
Problem Solving: Add in the style of one of the non-text objects margin: (Line-height of the container-height of the object itself)/2PX 0; and vertical-align:middle;
7.IE6, hover failure
Problem Description: IE6, hover only valid for a tag
Problem Solving: using JS code to solve
8.IE6 incompatible position:fixed;
Problem Description: IE6 does not support position:fixed;
Problem Solving: 1. Use JS code to solve
2. Use CSS expression to resolve (note: Because the CSS expression greatly affects performance, generally not recommended), the code is as follows:
/*IE6 head fixed positioning*/. Fixed-top{position:Absolute;Bottom:Auto;Top:expression (eval (document.documentElement.scrollTop));}/*IE6 Right fixed position*/. Fixed-right{position:Absolute; Right:Auto; Left:expression (eval (document.documentelement.scrollleft+document.documentelement.clientwidth-this.offsetwidth) -(parseint (This.currentStyle.marginLeft, 10) | | 0)-(parseint (This.currentStyle.marginRight, 10) | | 0));}/*IE6 Bottom fixed positioning*/. Fixed-bottom{position:Absolute;Bottom:Auto;Top:expression (eval (document.documentelement.scrolltop+ document.documentelement.clientheight-this.offsetheight-(parseint (This.currentStyle.marginTop, 10) | | 0)-(parseint (This.currentStyle.marginBottom, 10) | | 0 )));}/*IE6 left fixed position*/. Fixed-left{position:Absolute; Right:Auto; Left:expression (eval (document.documentElement.scrollLeft));}
There may be jitter in this case, so you need to add
/**/_body{background-image:url (about:blank); Background-attachment:fixed;}
9.ie6 double margin When floating
Problem Description: IE6 double margin when floating with float
Problem Solving: setting property display:inline;
10. When there are 2 or more floating in Li, the gap between Li is a bug
problem Description: in IE6, 7, when there are 2 or more floating in Li, the gap between Li is a bug
Problem Solving: setting property vertical-align:top;
Text overflow bug under 11.ie6
Problem Description: The following code, under IE6, the text content will overflow, more than a "", and the more the number of comments, the overflow content will also increase
. test{zoom:1;overflow:hidden;width:500px;}. box1{float:left;width:100px;}. box2{float:right;width:400px;}<Divclass= "Test"> <Divclass= "Box1"></Div> <!--Notes - <Divclass= "Box2"> I'm going to spill it.</Div></Div>
Problem Solving: Method 1: Delete all comments between Box1 and Box2
Method 2: cancel the floating of Box1 and Box2
Something: In addition to IE6, 7 of some of their own bugs, more compatibility issues from the browser itself to some CSS new properties, selectors or some new features are not supported or not fully supported, so if the project needs to support the low version of the browser, please confirm the use of CSS features browser support level, Recommended login http://caniuse.com/for detection.
Browser CSS compatibility issues summary and resolution