Browser CSS compatibility issues summary and resolution

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;}

　　　　　　

Browser CSS compatibility issues summary and resolution