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

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

DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定 ...
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧（转）
本人对前端处理不是很牛,所以转载这文章.原文地址:http://www.divcss5.com/wenji/w632.shtml DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小 ...
html布局文字设置,div css布局中css中文字体设置
在HTML网页结构中,会用到中文字,而中文字有得多中笔墨体,有的开发者在自身电脑中下载并安装不少摩登字体.而这些中文字体CSS设置装备摆设提倡? 1.不克不及随意CSS设置装备摆设本人安装中笔墨体假 ...
[存档]Div+Css布局中经常使用的小技巧合集
CSS网页布局开发中,会有很多小技巧,这里再扩展一下您所想要得到的知识,相信您会有很多收获! 一.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值. 二.同一个的c ...
结合html和css制作页面的布局结构,CSS Div网页布局中的结构与表现
在Web标准中一个很重要的概念就是强调页面的结构与表现分离.说的通俗一点就是XHTML中应该没有样式化的东西,而且Web在浏览器中除内容外都应该由CSS表现,这包括布局与其它样式.一旦一个标准的XHT ...
DIV CSS布局-固定页面开度布局
DIV CSS布局中主要CSS属性介绍: Float: Float属性是DIV CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Fl ...
div+css布局与table布局比较
div+css布局与table布局比较一.背景介绍 table布局是网页早期布局实现的主要手段,当时的网页构成,相对也比较简单,多是以文本以及静态图片等组成的,类似于报纸的形式,分区分块显示,ta ...
div+css 布局下兼容IE6 IE7 FF常见问题
div+css 布局下兼容IE6 IE7 FF常见问题收藏所有浏览器通用 (市面上主要用到的IE6 IE7 FF) height: 100px; IE6 专用 _height: 100px; I ...
重构html布局,网站重构|网页重构|浏览器兼容|div+css布局|psd转html|概念网络
什么是网站重构网页重构就是把"没有采用Div+CSS布局的网站,大量使用HTML进行定位.布局,或者虽然已经采用Div+CSS,但是未遵循HTML结构化标准的站点"变成" ...

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

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

最新文章

热门文章