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中不存在此现象。  

<! 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=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中。

<! 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=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值,可以让外层重新计算自己的高度。如：

.outer  {
background : #FFFF00 ; /* 外框使用黄色作为背景 */
border : 1px solid #fff ;
}

白色的1px边框用户在白色背景下看不见。但是如果使用border值,必须指定边框的类型,solid或者dotted，否则在FireFox中显示时候,上下边距就变成了0。
        (2)前一种方案在设计要求较高时，1px的误差会有影响。因此也可以从ouer内部着手，给其添加两个空div对象，并且使其高度为0px，解决问题。

.clear-div {
    height : 0px ;
    overflow : hidden ;
}

< div  class ="box" > 上部 </ div >
< 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属性。代码如下：

<! 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=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 >

参考文章：CSS:IE与Firefox的CSS兼容大全