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/