ie6一个奇怪的bug
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:admin 阅读 246
废话不多说先看下代码:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/D

废话不多说先看下代码:

<!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来改变大小,当然会影响字体大小!!!如有错误的地方请大家指正。。。

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2