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：将</div>和<img> 写在一行

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

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

hack : 将<img>转为块元素，给<img>加声明：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)[b]在IE6以及以下版本中，列表阶梯bug[/b]

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)[b]在IE6文本框<input type = "text"/>会多解析1px;[/b]

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

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

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

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

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


hack1：删除它周围的注释

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

hack3：去掉父级元素的宽度

hack4：在重复的元素后面添加<br/>

hack5：给文字外面套<div></div>

hack6：清除浮动

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

hack：在里面在套用一个<div></div>给其设置外面div的宽度+缺失的宽度，在给此div设置：overflow：hidden；