CSS 中ie6兼容问题

1)CSS Bug:CSS样式在各个浏览器中解析不一致的情况，或者说是CSS样式在浏览器中不正确显示问题，成为CSS Bug

2)CSS  Hack: CSS 中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，因为他们都属于个人对CSS代码的

非官方修改，或者非官方补丁。有人喜欢用patch（补丁）来描述这种行为。

3)Filter:表示过滤器的意思，是一种对特定浏览器或者浏览器组显示或者隐藏规定声明的方法，本质上说，Filter是一种用来

过滤不同浏览器的Hack类型

*使用Hack带来一些副作用

IE6常见CSS解析Bug和Hack

1)图片间隙

a) div中图片间隙(出现在IE6以及更低版本中)

  描述：在div中插入图片，图片会将div下方撑大3像素。

hack1：将

和 写在一行

hack2 :将转为块元素，给其添加声明：display:block;

b)dt,li中图片间隙问题(IE 6)

   hack : 将转为块元素，给加声明：display : block；

   IE6中 li解析高度会多2px, 将 li 转为块元素，加声明：display : block；

2)默认高度（IE6）

    描述：ie6及以下版本，部分块元素会有默认高度(低于18px高度）

    hack1：给元素添加声明： font-size:0;      //前提是该块元素里没有文字

     hack2：给元素添加声明：overflow：hidden；

     hack3： 在元素中插入html注释：

     hack4：.在元素中插入html的空白符： 

3)表单行高不一致（IE,MOZ,C,O,S）

  描述：表单行高对其方式不一致

 hack ：给表单元素添加声明： float：left；

4)百分比bug 

   描述:在IE6以及以下版本中解析百分比时，会按四舍五入的方法计算百分比，从而导致50%加50%大于100%的情况。

    hack：给右边的元素添加声明：clear：right；   //清除右浮动。

                 clear：left；   //清除左浮动。

                 clear：both；   //清除两边浮动。

 5) 透明属性

 IE浏览器写法：filter：alpha(opacity=value);  //取值范围 1-100(IE8以下)

 兼容其他浏览器写法：opacity：value；(value 取值0~1，例如 0.1,0.2~0.9)

6)在IE6以及以下版本中，列表阶梯bug

a)描述： 当li里的元素a转为块元素时，并设置高度，在IE6以下会呈现li垂直效果

  hack：如果想让所有的列表在一行显示，需要将li里的a设置浮动即可。

b)描述：在给子元素使用float:left ，并且设置高度，父元素中设置浮动，会出现梯效果

   hack：给父元素设置浮动

c)描述：li里的a{ display：block}(IE7)以下出现行高不一致情况

   hack1：给a加声明 ：  display：inline-block ;

   hack2：给li 加float：left；并设li的宽度等于父元素

 

7)在IE6文本框会多解析1px;

       hack1：相应的把文本框的高度设小1px；

8) 在IE6中奇数宽高的BUG

描述：IE6中奇数的高宽显示大小与偶数高宽显示大小存在一定的不同。其中要问题是出在奇数高宽上。

hack：要解决此类问题，只需要尽量将外部定位的div高宽写成偶数即可。

9)IE6中图片链接的下方有间隙

IE6中图片的下方会存在一定的间隙，尤其在图片垂直挨着图片的时候，即可看到这样的间隙。要解决此类问题，需要将img标签定义为display:block 或定义vertical-align对应的属性。也可以为img对应的样式写入font-size:0

10)在ie6中有时候宽度并没有超出，但是会重复最后1个字的情况

        hack1：删除它周围的注释

        hack2：在父级元素加上: display:inline;

        hack3：去掉父级元素的宽度

         hack4：在重复的元素后面添加

         hack5：给文字外面套

          hack6：清除浮动

11)在ie6中,dl中插入图片如果宽度不够，最右边的dl会被挤下去，

     hack：在里面在套用一个

给其设置外面div的宽度+缺失的宽度，在给此div设置：overflow：hidden；