ie6兼容问题

本文学习愚人码头的《ie6疯狂系列》原文链接http://www.css88.com/archives/1584

1】父级使用padding后，子元素相对定位有偏差

解决办法：

<div style="position:relative; padding:20px 20px; border:2px solid #F00;">
<div style="position:absolute; top:0;_top:2px; left:0;_left:-20px; border:1px solid #690;">test box</div>
</div>

2】滤镜后链接不能点击

解决办法：

在a上添加一个position：relative；

若使用滤镜的容器上使用了绝对定位，则要在其外面再添加一个容器并设置position：absolute

3】奇数宽高引发1px偏差（外容器相对，内容器绝对定位right：0）

解决办法：

奇数改为偶数

4】文字溢出bug（溢出的字数=注释的条数*2-1）

解决办法：删除注释

5】选择内容的div被下拉框盖住

解决办法：

在div里面添加一个iframe标签，并且设置其透明度为0

<iframe style="background:#F0F9FB;100%;height:110px;filter:alpha(opacity=0);-moz-opacity:0"></iframe>

6】两个li之间在ie6中有3像素的间隔

解决办法：

li {vertical-align:middle}

类似：如果<li><a>...</a></li>【空格】<li><a>...</a></li>,则两个显示的li之间也会有空行

解决办法：

1）li a里面添加zoom:1

2) li a里面添加width：100%（若不行再加float:left）

3）两个li间不要有空格

4）li里面添加display:online

7】中文注释后样式失效

原因分析：1）css使用utf-8编码，而html使用gbk编码

              2）当注释的字数为奇数时，跟后面的*/组成合法字符，前面的/*未被关闭

              3）未指明@charset头声明，浏览器使用默认页面编码解析css文件

解决办法：1）/*样式定义*/    改为     /*样式定义 */

              2）charset="utf-8"

              3）使用英文注释

8】IE6下链接伪类（:hover）CSS背景图片有闪动BUG

解决办法：

添加

<!–[if IE 6]>  

<script type=”text/javascript”>

document.execCommand(”BackgroundImageCache”, false, true);   

</script>

<![endif]–>

9】！important在ie6下的识别情况

1）#id1{font-size:12px;}    .classname1{font-size:68px}无论在哪个浏览器里面，文字大小都为12px

2）#id1{font-size:12px;}    .classname1{font-size:68px !important;}无论在哪个浏览器里面，文字大小都为68px

3）#id1{font-size:12px;font-size:68px !important;}无论在哪个浏览器里面，文字大小都为68px

4)#id1{font-size:12px !important;font-size:68px ;}除了ie6外在哪个浏览器里面，文字大小都为12px，而在ie6中为68px

10】div嵌套使用float造成3px的bug

解决办法：

正好装下的那个div设置margin-right:3px

其他解决方法：1）正好装下的那个div前面添加一个div，设置其属性为visibility:hidden（还有很多方法，不列举了）