ie6一个奇怪的bug

废话不多说先看下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
.num { margin-left:100px; margin-top:100px;}
.num li{ float:left;}
.num li a{ display:block; background-color:#fff; width:18px; height:8px;  margin-left:5px; border:1px solid #000;}
.num li a.dis{  background-color:#DE6003;}
ol li{ list-style:none;}
</style>
</head>

<body>
    <ol class="num">    
        <li><a class="dis"></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
        <li><a></a></li>
    </ol>
</body>
</html>

在标准浏览器下是这样的

但是在ie6下是这样的

这就是a在设置display:block后定义高度的情况下呈现的高度与标准浏览器不同，后来查了一下ie6下a的默认设置并没有影响到这里，开始以为是没有文本的原因加了之后还是不起作用，苦思冥想为什么这个高度不起作用，后来想到了文件域中通过设置font-size来改变高度，按照这样的思路给a一个一个试font-size的大小，当为6px时呈现的高度刚好和标准浏览器相同。于是在想这个高度为什么不起作用，是不是很小浏览器不支持？？？所以就把高度改为20px后ie6下和标准浏览器表现的都一样，于是接着把20px改为19px结果仍然是一样的，当改为18px结果却不同了。ie6下仍然是19px的高度而其他浏览器都是18px，一直改小情况都是如此。在想是不是ie6下内联元素设置为块级元素后默认的最小高度是19px;把a换为其他内敛元素（如span）结果和a一样的。开始以为是内敛元素转为块级元素后才会出现这样，后来直接改为p试试结果仍是一样。

这就让我得出结论：当块级元素设置高度小于19px时，ie6下的高度一直都是19px不会随着你自己设置的高度而变化，只有当高度大于19px时ie6下的高度表现才会和其他浏览器一样！！！

这里的解决方法是设置font-size来改变大小，当然会影响字体大小！！！如有错误的地方请大家指正。。。

posted @ 2011-11-02 12:35  nbaTom  阅读(429)  评论(3)  编辑  收藏  举报