HTML/CSS IE6、7兼容性问题、bug总汇

IE6，7下li、img的间隙———————————————————

在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生几px的间隙

解决办法: 
    1.给li加浮动,给其父级清浮动
    2.给li加vertical-align:top;
当IE6下最小高度问题，和 li的间隙问题共存的时候 给li加浮动

img元素在本身没有浮动也没有宽高的时候，会距离父级底部有几px间隙

解决办法: 
    1.给img加浮动,给其父级清浮动
    2.给img加vertical-align:top;

IE6 7最小高度问题————————————————————–

IE6 7 下，元素最小高度为19px;
解决办法:设置 overflow:hidden

IE6下input输入框背景移动问题—————————————————

给输入框设置背景，在标准下背景不会随着输入内容改变
IE6下，当输入内容长度超过输入框，输入内容自动左移时，
输入框的背景会随着输入内容左移。

解决办法:
给input加个父级，把本该给input设置的背景设置给父级

IE6下1px dotted不识别问题——————————————————

解决办法:切背景平铺

在IE6下的文字溢出BUG———————————————————–

子元素的宽度和父级的宽度相差小于3px的时候,两个浮动元素中间有注释或者内嵌元素，子元素中的文本文字会溢出

解决办法:用div把注释或者内嵌元素用div包起来   

IE6 下奇数宽高问题————————————————————

在 IE6 下定位元素的父级宽高都为奇数，
那么在 IE6 下定位元素的 right 和 bottom 都有1像素的偏差。

解决办法: 尽量用偶数做宽高

IE6,7下表单控件问题————————————————————

在IE6，7下输入类型的表单控件上下各有1px的间隙

解决办法:给input加浮动

在IE6，7下输入类型的表单控件加border:none;不起效果

解决办法: 重置input的背景

在IE6，7下输入类型的表单控件输入文字的时候，背景图片会跟着一块移动

解决办法: 把背景加给父级

IE6 PNG问题——————————————————————–

IE6下PNG背景不能透明。

解决办法，用JS组件处理，组件需要自行下载
下载地址http://www.jb51.net/jiaoben/33338.html

    <!--[if IE 6]>
    <script src="DD_belatedPNG_0.0.8a.js"></script>
    <script>
    DD_belatedPNG.fix(‘.box‘);
    /*方法里面填写要起作用的元素*/
    </script>
    <![endif]-->

IE6下important问题————————————————————

在IE6下 在important 后再在加一条同样的样式，会破坏掉important的作用，
会按照默认的优先级顺序来走

IE CSSHACK————————————————————————

css hack：
\9 IE10之前的IE浏览器解析
+,* IE7包括IE7之前的IE浏览器解析
_IE6包括IE6之前的IE浏览器   

【外边距篇】
上下外边距叠压问题—————————————————-

   例如一上一下两个div，上div设置margin-bottom:10px，
   下div设置margin-top:10px，结果只会让两个margin叠压在一起，
   而不会相加为20px

   解决办法:把其中一个margin换成padding

margin传递问题———————————————————-

    IE6,7下父子级包含的时候子级的margin-top会传递给父级；
    子级的margin-top会消失

   在IE6下父级有边框的时候，子元素的margin值消失

   解决办法:触发父级的haslayout (zoom:1)

IE6下最后一个子元素margin消失问题—————————————–

当一行子元素占有的宽度之和和父级的宽度相差超过3px,
或者有不满行状态的时候,最后一个子元素的下margin在IE6下就会失效

IE6下的双边距BUG—————————————————————

在IE6下，块元素有浮动和横向margin的时候，横向的margin值会被放大成两倍
解决办法: display:inline;

【浮动与定位篇】

IE6下内容撑开设置宽高———————————————————-

在IE6下，内容会撑开设置好的宽高   
例如，给固定宽度的wrap_div下放left_div、right_div两个div并浮动，
wrap_div的宽度正好放下两个内部div(两个内部div也设置了宽度)。

在IE6下，如果left_div或right_div内部内容宽度大于div本身宽度，
内容就会撑开宽度让wrap_div容不下，就会发生折行。

解决办法: 给内容计算好宽高，不要溢出

IE6下子元素浮动问题———————————————————

在IE6下，父级下的两个子元素(块元素、未设置宽高)都浮动，
如果两个子元素内部有块元素时，两个子元素不会内容撑开宽高，而会
占满整行。

解决办法:在IE6下父级下子元素浮动，如果子元素宽度需要内容撑开，
就给子元素里面的块元素都加浮动

IE6，7下3像素BUG—————————————————————

父级下两个div，左div设置左浮动width:100px，右div设置margin-left:100px
标准浏览器下左div和右div会相连。IE6,7下两者之间会有3px的间距。

解决办法:在IE6，7下元素要通过浮动并在同一行，就给这行元素都加浮动

IE6下绝对定位元素消失———————————————————

当浮动元素和绝对定位元素是并列关系的时候，在IE6下绝对定位元素会消失

解决办法:
给定位元素外面包个div

在IE6，7下父级的overflow包不住相对定位子元素———————————-

在IE6，7下，子元素有相对定位的话，父级的overflow包不住子元素

解决办法: 给父级也加相对定位

IE6,7 下不支持fixed————————————————————

position:fixed在IE6下失效

解决办法:
1.  

_position:absolute;
        _top:expression(eval(document.documentElement.scrollTop+100));

2.用JS代替这个效果