首页 > 代码库 > DIV+CSS布局中IE与FF浏览器之间重要的兼容性差异

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

2024-07-12 13:50:46   224人阅读

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

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

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

 

[html] view plaincopyprint?
  1. <html>  
  2.     <head>  
  3.         <title>让body容器在浏览器中居中</title>  
  4.         <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"body_center.css">  
  5.     </head>  
  6.   
  7.     <body>  
  8.         <div id="container">  
  9.   
  10.         </div>  
  11.     </body>  
  12. </html>  

 

body_center.css文件：

 

[html] view plaincopyprint?
  1. body {  
  2.       margin:0px;  
  3.       padding:0px;  
  4.       font:12px arial,宋体;  
  5.       text-align:center;  
  6. }  
  7.   
  8. #container {  
  9.       margin:0 auto;  
  10.       width:90%;  
  11.       height:500px;  
  12.       background:green;  
  13.       text-align:left;  
  14. }  

 

 

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

（2）举例：

 

[html] view plaincopyprint?
  1. <html>  
  2.     <head>  
  3.         <title>IE浏览器小于18px的高度如何正常显示</title>  
  4.         <link rel="stylesheet" type="text/css" href=http://www.mamicode.com/"llq_chayi.css">  
  5.     </head>  
  6.   
  7.     <body>  
  8.         <div id="container">  
  9.             <div id="header">  
  10.                       
  11.             </div>   
  12.                         <div class="fenge"></div>  
  13.             <div id="main">  
  14.   
  15.             </div>  
  16.                         <div class="fenge"></div>  
  17.             <div id="footer">  
  18.   
  19.             </div>  
  20.         </div>  
  21.     </body>  
  22. </html>  


llq_chayi.css文件：

 

 

[html] view plaincopyprint?
  1. body {  
  2.      margin:0px;  
  3.      padding:0px;  
  4.      font:12px 宋体;  
  5. }  
  6.   
  7. #header {  
  8.        width:100%;  
  9.        height:80px;  
  10.        background:red;  
  11. }  
  12.   
  13. #main {  
  14.      width:100%;  
  15.      height:600px;  
  16.      background:yellow;  
  17. }  
  18.   
  19. #footer {  
  20.      width:100%;  
  21.      height:80px;  
  22.      background:blue;  
  23. }  
  24.   
  25. .fenge {  
  26.      width:100%;  
  27.      height:10px;  
  28.      clear:both;  
  29.      overflow:hidden;  
  30.   
  31. }  



 

·浏览器之间的默认内外边距不一样，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就可以解决了。


联系
我们