DIV+CSS布局中IE与FF浏览器之间重要的兼容性差异

浏览数：18 / 时间：2015年06月09日

IE与FF浏览器之间的一些重要差异：

·IE与FF的居中方式不一样。

（1）如何让body体能够在IE与FF浏览器中都居中的例子：

[html] view plain copy print ?

<html>
<head>
<title>让body容器在浏览器中居中</title>
<link rel="stylesheet" type="text/css" href="body_center.css">
</head>
<body>
<div id="container">
</div>
</body>
</html>

body_center.css文件：

[html] view plain copy print ?

body {
margin:0px;
padding:0px;
font:12px arial,宋体;
text-align:center;
}
#container {
margin:0 auto;
width:90%;
height:500px;
background:green;
text-align:left;
}

·IE默认的最小高度为18px，不满18px的高度一律当做18px显示，而FF浏览器指定多少像素就显示多少像素。

（2）举例：

[html] view plain copy print ?

<html>
<head>
<title>IE浏览器小于18px的高度如何正常显示</title>
<link rel="stylesheet" type="text/css" href="llq_chayi.css">
</head>
<body>
<div id="container">
<div id="header">
</div>
<div class="fenge"></div>
<div id="main">
</div>
<div class="fenge"></div>
<div id="footer">
</div>
</div>
</body>
</html>

llq_chayi.css文件：

[html] view plain copy print ?

body {
margin:0px;
padding:0px;
font:12px 宋体;
}
#header {
width:100%;
height:80px;
background:red;
}
#main {
width:100%;
height:600px;
background:yellow;
}
#footer {
width:100%;
height:80px;
background:blue;
}
.fenge {
width:100%;
height:10px;
clear:both;
overflow:hidden;
}

·浏览器之间的默认内外边距不一样，body样式中药对margin与padding清0。

·指定了区块（即一个div）的高度，当这个区块的内容超出该设置的高度时，IE浏览器自动调整高度，而FF不会。所以，解决此问题的方法就是不用指定区块的高度。

·FF中的区块在使用了浮动属性之后显示与浮动原理一致，但是IE却不遵循浮动原理。所以，在使用浮动的区块要记得父区块也要浮动脱离文档流、清除浮动等以保证浏览器的兼容性。

·IE与FF在列表属性方面存在较大差异，主要表现在内外边距默认设置上不一样。所以，为了保证两者兼容，一般ul的样式中要将margin与padding先清0.

·h1-h6标签的内外边距不一样，所以要将margin与padding先清0。

·边框border宽度影响兼容性。在IE中，width指定的是border的宽度加上内容的宽度之和，而FF则只是内容宽度不算border宽度。解决此问题的方法就是，在某元素的样式表中对width值进行两个设置，其中，“widt=值！important”这个针对FF，而此设置对IE不起作用。然而，再设置一个“width=值”针对IE就可以解决了。

DIV+CSS布局中IE与FF浏览器之间重要的兼容性差异,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

DIV+CSS布局中IE与FF浏览器之间重要的兼容性差异