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>
