IE6,IE7,IE8 CSS Bug兼容解决

1：li 边距“无端”增长

任何事情都是有缘由的，li边距也不例外。
先描述一下具体情况：有些时候li边距会忽然增 加不少，值也不固定（只在IE6/IE7有这种现象），让人摸不着头脑，仔细“研究”发现是因为其 低级元素ul的padding引 起，padding的上下值对li有影响，左右无影 响。因此只好笨手笨脚地把padding去掉，换成margin。 这是能解决问题，但每每不是咱们想要的结果，或许 还会引发其余没必要要的怪现象。

如今终于发现解决这个问题的方法，其实很简单，既然是有ul引 起的，就设置ul的显示形式为*display:inline-block;便可，前面加*是只 针对IE6/IE7有效，其余浏览器并不渲染这个属性。

2：分页数字 字体用“Arial ”加粗不抖动

CSS：

body, ul, h1 {
    font-family:Arial;
    font-size:12px;
}
.page {
    text-align:center;
}
.page a {
    display:inline-block;
    padding:5px 8px;
    text-decoration:none;
    border:1px solid #09F;
    background-color:#0CF;
    color:#FFF;
}
.page a:hover, .page .selected {
    border:1px solid #CCC;
    background-color:#FFF;
    color:#000;
    font-weight:bold;
}

HTML：

<h1>分页样式</h1>
<div class="page">            
    <a href="#">1</a> 
    <a href="#"class="selected">2</a> 
    <a href="#">3</a> 
    <a href="#">4</a> 
    <a href="#">5</a>
    <a href="#">6</a> 
    <a href="#">7</a> 
    <a href="#">8</a> 
    <a href="#">9</a> 
    <a href="#">10</a> 
</div>

3：IE6 CSS选择器区分IE6
IE6不支持子选择器；先针对IE6使用常规申明CSS选择器，而后再用子选择器针对IE7+及其余浏览器。
/IE6 专用 /

.content {color:red;}

/ 其余浏览器 /

div>p .content {color:blue;}

4：IE6最小高度
IE6不支持min-height属性，但它却认为height就是最小高度。解决方法：
使用IE6不支持但其他浏览器支持的属性!important。

#container{min-height:200px; height:auto !important; height:200px;}

5：IE6100% 高度
在IE6下，若是要给元素定义100%高度，必需要明肯定义它的父级元素的高度，若是你须要给元素定义满屏的高度，就得先给html和body定义height:100%;

6：IE6躲猫猫bug
在IE6和IE7下，躲猫猫bug是一个很是恼人的问题。一个撑破了容器的浮动元素，若是在他以后有不浮动的内容，而且有一些定义了:hover的连接，当鼠标移到那些连接上时，在IE6下就会触发躲猫猫。
解决方法很简单：

1. 在（那个未浮动的）内容以后添加一个<span style="clear: both;"> </span>
2. 触发包含了这些连接的容器的hasLayout，一个简单的方法就是给其定义height:1%;

7:IE6绝对定位元素的1像素间距bug
IE6下的这个错误是因为进位处理偏差形成（IE7已修复），当绝对定位元素的父元素高或宽为奇数时，bottom和right会产生错误。惟一的解决办法就是给父元素定义明确的高宽值，但对于液态布局没有完美的解决方法。

8: IE下z-index的bug
在IE浏览器中，定位元素的z-index层级是相对于各自的父级容器，因此会致使z-index出现错误的表现。

解决方法：

其父级元素定义z-index，有些状况下还须要定义position:relative

9: Overflow Bug
在IE6/7中，overflow没法正确的隐藏有相对定位position:relative;的子元素。
解决方法：

给外包容器.wrap加上position:relative;。

10: 横向列表宽度bug
若是你使用float:left;把<li>横向摆列，而且<li>内包含的<a>（或其余）触发了 hasLayout，在IE6下就会有错误的表现。
解决方法：

给<a>定义一样的float:left;

11: 列表阶梯bug
列表阶梯bug一般会在给<li>的子元素<a>使用float:left;时触发，咱们本意是要作一个横向的列表(一般 是导航栏)，但IE却可能呈现出垂直的或者阶梯状。
解决办法：

给<li>定义float:left;而非子元素<a>，或者 给<li>定义display:inline;也能够解决。

12: 垂直列表间隙bug
当咱们使用<li> 包含一个块级子元素时，IE6(IE7也有可能)会错误地给每条列表元素（<li>）之间添加空隙。
解决方法：

方法1：.clear{clear:both;}清除float来解决这个问题；
方法2：触发<a>的hasLayout（如定 义高宽、:使用zoom:1;）;
方法3：给<li> 定义display:inline;来解决此问题；另外还有一个极有趣的方法，给包含的文本末尾添加一个空格。

13: IE6调整窗口大小的 Bug
当把body居中放置，改变IE浏览器大小的时候，任何在body里面的相对定位元素都会固定不动了。
解决办法：

给body定义position:relative;

14: 文本重复Bug
在IE6中，一些隐藏的元素（如注释、display:none;的元素）被包含在一个浮动元素里，就有可能引起文本重复bug。
解决办法

给浮动元素添加display:inline;

15：如何去掉点击连接时的虚线

在 CSS 中加入以下代码：

:focus{{ouline:0;}
a,a:hover{outline:none; blur:expression(this.onFocus=this.blur());}

16：css reset中的list-style:none
在IE6,7下
1)当ul不具备float:left;display:inline;时,
不管有没有list-style:none这个属性,列 表符都被隐藏,不占位置
2)当ul具备float:left;display:inline;属性时,
list- style:none,列表符被隐藏,可是仍然留有位置(list-style-position:inside);
未设置list-style:none;列表符被隐藏,也不占位(list-style-position:outside)
在firefox中只要list-style-type为none ,则 不管list-stype-position的值为outside或inside , list-style都能很好的被隐藏
而在IE6,7中,仅 设置list-style:none,并不足以解决全部问题

在css reset的时候使用 list-style:none outside none 更好

17: IE6中伪类:hover的使用及Bug
之前不曾遇到相似的问题，一番google，才知道这是IE6处理CSS伪类:hover的Bug。例如以下的代码：

a {color: #333;}
a span {color: green;}
a:hover {}
a:hover span {color: red; }

<a href=”http://www.taobao.com“> 淘宝网 <span> 淘你喜欢 </span></a>

在IE7/FF中，鼠标移动到连接上时，”淘你喜欢”字样会变为红色，但IE6则无反应。因此IE6的bug就是若是a 与 a:hover的css定义是同样的，也就是说若是a:hover 中没有样式的改变，hover就不会被触发。但若是在a:hover{}增长一些特定的属性，例如

a:hover{border:none;}

或者

a:hover{padding:0;}

又或者

a:hover{background: none;}

此时hover就能够触发了。

18:去掉button按钮左右两边的留白

input,button{overflow:visible;padding:0;}

<input type="submit" name="button" id="button" value="左右留白的解决方法" />

19:中文字体在css中的写法

黑体SimHei\9ED1\4F53黑体 宋体SimSun\5B8B\4F53宋体
新宋体 NSimSun\65B0\5B8B\4F53新宋体 仿宋FangSong\4EFF\5B8B仿宋
楷体KaiTi\6977\4F53 楷体
微软正黑体Microsoft JhengHei\5FAE\x8F6F\6B63\9ED1\4F53微软正黑体
微软雅黑Microsoft YaHei\5FAE\8F6F\96C5\9ED1微软雅黑 幼圆 YouYuan\5E7C\5706幼圆

20:IE6下css实现max/min-width/height

_width:expression(this.width>300?"300px":ture); max-width:300px;

_height:expression(this.height>300?"300px":ture); max-height:300px;

来自 http://www.wufangbo.com/ie6-ie7-ie8-css-bug-2/