DIV+CSS布局中IE与FF浏览器之间重要的兼容性差异
2012-05-08 17:24
726 查看
IE与FF浏览器之间的一些重要差异:
·IE与FF的居中方式不一样。
(1)如何让body体能够在IE与FF浏览器中都居中的例子:
body_center.css文件:
·IE默认的最小高度为18px,不满18px的高度一律当做18px显示,而FF浏览器指定多少像素就显示多少像素。
(2)举例:
llq_chayi.css文件:
·浏览器之间的默认内外边距不一样,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就可以解决了。
·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网页布局在各个浏览器之间的差异
- DIV+CSS与不同IE/FF版本等的兼容性
- DIV+CSS布局设计时IE6、IE7、FF 与兼容性有关的特性
- div+css 构建3行3列的表格,在FF和IE,以及苹果的浏览器下均可以正常的显示,放大,缩小
- <div+css页面布局课堂笔记>3---页面布局的盒子模型(IE与其他浏览器区别)
- (div+css)上面固定下面自适应页面布局的实现(FF,IE)
- (div+css)上下固定中间自适应高度网页布局的实现(FF,IE)
- (div+css)上下固定中间自适应高度网页布局的实现(FF,IE)
- div+css 在IE、FF下兼容性总结
- css FF与IE兼容性总结
- W3C对于CSS及浏览器之间的兼容性问题解决方案
- 浏览器对DIV+CSS兼容性问题大总结
- DIV+CSS设计时IE6、IE7、FF 与兼容性有关的特性
- div+css 布局浏览器兼容
- IE与FF不兼容网页布局CSS问题解决方案()
- DIV+CSS布局在IE和firefox中常见不兼容问题及解决方法
- div+css 布局下兼容IE6 IE7 FF常见…
- IE和Firefox浏览器下javascript、CSS兼容性研究
- 第1次尝试div+css进行两栏式页面布局就遇到了IE的3px问题
- DIV+CSS布局浏览器兼容问题解决笔记