IE与FireFox对CSS支持不足问题汇总之一
注意:以下问题仅针对IE6及以下版本,FireFox2.0.3及以下版本,可能在后续版本中有所改进,笔者并未作进一步测试。
【前言】CSS发展到2.0虽然得到了浏览器厂商的大力支持,在很多方面还是有不足,并没有完全参考规范。现在网站设计者们通常使用Hack CSS 方法或者编写两套CSS文件的方法解决不同浏览器的兼容性问题。以下就将平时所遇到的、阅读书籍时发现的问题,以及相应的解决方法做一个简单汇总。希望能给学习的同道一些启示,也希望大家集思广益,在评论中将自己发现的问题及解决办法写出来,共同学习提高。
1、盒模型问题:
A、宽度的计算问题。
在CSS标准中,一个盒模型包括4个区,分别是:内容、内边距(padding)、边框(border) 和外边距(margin)。而Width宽度的计算,CSS有它的标准。但是实际上,不同的浏览器的表现却不同。比如,
Firefox(FF)是准确按照CSS标准:width为内容的宽度,也就是说:
层的宽度 = width + padding(left and right) + border-width;
而IE则把width作为整个层的宽度:
内容的宽度 = width - padding - border-width;
B、IE中margin加倍问题。
当父层使用了float的时候,子层的margin值会加倍,在FireFox中不存在此现象。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<style>
.outer {
width:500px;
height:200px;
background:#000;
}
.inner {
float:left;
width:200px;
height:100px;
margin:5px;
background:#fff;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
以上代码在IE浏览器中可以发现,白色框的左边距是上边距的两倍。
解决方案:在类inner的定义里面添加display:inline;属性。
代码参考:关于盒模型的一系列问题
C、盒子高度不适应问题。
当内层对象高度发生变化时候,外层对象的高度不能自动调节,特别是内层对象使用margin和padding 属性的时候。问题同时存在于IE/Firefox/Mazilla中。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<style>
.outer {
background:#FFFF00;/*外框使用黄色作为背景*/
}
.inner {
margin-top:20px;
margin-bottom:20px;
text-align:center;
background:#0000FF;/*内部盒子使用蓝色*/
color:#FFFFFF;
}
.box{
background-color:#66FF99;/*这作为参照物*/
}
</style>
</head>
<body>
<div class="box">上部</div>
<div class="outer">
<div class="inner">对象中的内容</div>
</div>
<div class="box">下部</div>
</body>
</html>
以上代码预览时候可以发现,outer的上下部分别留下20px的空间,而这正是inner 定义的margin-top和margin-bottom值。虽然inner 在outer内部,但是outer 所占空间并没有增加(可以通过其背景颜色看到)。
解决方案:(1)在外层ouer样式中定义padding或者border值,可以让外层重新计算自己的高度。如:
background:#FFFF00;/*外框使用黄色作为背景*/
border:1px solid #fff;
}
白色的1px边框用户在白色背景下看不见。但是如果使用border值,必须指定边框的类型,solid或者dotted,否则在FireFox中显示时候,上下边距就变成了0。
(2)前一种方案在设计要求较高时,1px的误差会有影响。因此也可以从ouer内部着手,给其添加两个空div对象,并且使其高度为0px,解决问题。
height:0px;
overflow:hidden;
}
<div class="outer">
<div class="clear-div"></div>
<div class="inner">对象中的内容</div>
<div class="clear-div"></div>
</div>
<div class="box">下部</div>
以上参考李超的《网站布局实录》259页相关解决方法。实际中发现定义clear-div的数据为overflow:hidden;後,在Dreamweaver中会显示不正常。浏览器中显示正确。
(3)外层div内部有多个层元素,并且使用了float:left;时候,以上解决方法都无效。此时可以在外层div中添加overflow属性,同时在内层最后添加一个div,同时使用clear:both属性。代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<style>
.outer {
width:600px;
background:#000;
overflow:auto; /*这里添加*/
}
.inner1 {
display:inline; /*防止在IE中出现两倍margin错误*/
float:left;
width:200px;
height:100px;
margin:5px;
background:red;
}
.inner2 {
display:inline;/*防止在IE中出现两倍margin错误*/
float:left;
width:200px;
height:100px;
margin:5px;
background:yellow;
}
.clear {
clear:both;/*这一行也必须*/
}
</style>
</head>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2"></div>
<div class="clear"></div>/*这一个用于添加*/
</div>
</body>
</html>