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

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

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

(1)如何让body体能够在IE与FF浏览器中都居中的例子:

<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文件:

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>
	<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文件:

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就可以解决了。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值