浏览器兼容之旅第三站:IE常见Bug总结及修复方法—part1( 三 ) _云知道

display: block;
width: 130px;
height: 30px;
text-align: center;
color: #fff;
float: left;
background: #95CFEF;
border: solid 1px #36F;
margin: 30px 5px;
}

我们一起来看浏览器下的效果对比

解决这个Bug也有俩种方法，我们一起来看看
修复方法一：解决这个bug最简单的方法，只需要在li元素中也加上一个浮动，所以你只需这样做就能解决了

复制代码代码如下:
ul li {float: left;}

修复方法二：这个方法二也很简单，就是在li元素上应用display:inline

复制代码代码如下:
ul li {display: inline;}

六、li空白间距
这个Bug也是针对于li的，在IE下会无端增中li与li之间的垂直距离，别的先不说，先来看下面的代码
HTML Markup

复制代码代码如下:
ul
lia href="https://www.rkxy.com.cn/dnjc/#" Link 1 /a/li
lia href="https://www.rkxy.com.cn/dnjc/#" Link 2 /a/li
lia href="https://www.rkxy.com.cn/dnjc/#" Link 3 /a/li
/ul

CSS Code

复制代码代码如下:
ul {
margin:0;
padding:0;
list-style:none;
}
li a {
background: #95CFEF;
display: block;
}

同样我们来看浏览器下的对比图

虽然在IE6存在这样的烦人的事情，不过还是值得庆幸的，我们只需在写代码时稍加注意，就可以轻松的避免这样的Bug在你的页面中出现
方法一：
最简单的办法就是给a标签显式的定义一个宽度，用声明宽度的方法来触发IE浏览器的hasLayout，当然你也可以显式的定义一个高度，同样也可以解决，代码如下：

复制代码代码如下:
li a {width: 200px;}

方法二：
方法二是在a标签上进行浮动，并且清除浮动

复制代码代码如下:
li a {
display:block;
float: left;
clear: left;
}

方法三：
方法三也是比较简单，只在li标签上加上一个行内元素显示

复制代码代码如下:
li {display: inline;}
li a {display:block;}

方法四：
这种方法是在每个列表li上设置一个底边实线

复制代码代码如下:
ul li { border-bottom: 1px solid #666; }

这种方法问题是解决了，但生成了一个新的问题，就是li底部有一条实现，如果实线颜色和页面背景色不一致将会给你带来视觉上的不同，所以最好底线颜色设置成你页面相同的背景色，当然你也可以尝试下面的方法来解决：

复制代码代码如下:
ul li { border-bottom: 1px solid #ffffff; display:block; margin-bottom: -1px;}

七、IE6下无法设置元素的微高
这个Bug也很有意思，有时我们在Web页面中使用div元素来模拟line或者说制作白色间距，显显在元素中定义了好少的高度，比如说2px的height，可是在IE6下，他始终都不以2px的高度见世，如下面的一段代码

复制代码代码如下:
.demo {
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
margin: 30px 0;
}

接着我们来看浏览器的对比图：

造成这要的Bug其实很简单，因为在IE浏览器下，他会拒绝高度小于字号的设置，这样解决起来就很简单了，我们只需要把元素的字号设置为0，如果为了更安全，你最好加上line-height也为0，具体看下面的代码

复制代码代码如下:
.demo {
background: #95CFEF;
border: solid 1px #36F;
width: 300px;
height: 2px;
font-size: 0;
line-height: 0;
margin: 30px 0;
}

上面是通过字体大小来解决，其实还有一种更简单的方法，利用overflow:hidden将超过高度的部分直接切掉，从而达到2px的微高度设置，具体如下