首页 > 代码库 > DIV+CSS布局中IE与FF浏览器之间重要的兼容性差异
DIV+CSS布局中IE与FF浏览器之间重要的兼容性差异
IE与FF浏览器之间的一些重要差异:
·IE与FF的居中方式不一样。
(1)如何让body体能够在IE与FF浏览器中都居中的例子:
[html] view plaincopyprint?
- <html>
- <head>
- <title>让body容器在浏览器中居中</title>
- <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"body_center.css">
- </head>
- <body>
- <div id="container">
- </div>
- </body>
- </html>
body_center.css文件:
[html] view plaincopyprint?
- 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 plaincopyprint?
- <html>
- <head>
- <title>IE浏览器小于18px的高度如何正常显示</title>
- <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"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 plaincopyprint?
- 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就可以解决了。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。