zoukankan      html  css  js  c++  java
  • DIV+CSS布局中IE与FF浏览器之间重要的兼容性差异

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

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

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

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

    body_center.css文件:

    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.       90%;  
    11.       height:500px;  
    12.       background:green;  
    13.       text-align:left;  
    14. }  

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

    (2)举例:

    1. <html>  
    2.     <head>  
    3.         <title>IE浏览器小于18px的高度如何正常显示</title>  
    4.         <link rel="stylesheet" type="text/css" href="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文件:

    1. body {  
    2.      margin:0px;  
    3.      padding:0px;  
    4.      font:12px 宋体;  
    5. }  
    6.   
    7. #header {  
    8.        100%;  
    9.        height:80px;  
    10.        background:red;  
    11. }  
    12.   
    13. #main {  
    14.      100%;  
    15.      height:600px;  
    16.      background:yellow;  
    17. }  
    18.   
    19. #footer {  
    20.      100%;  
    21.      height:80px;  
    22.      background:blue;  
    23. }  
    24.   
    25. .fenge {  
    26.      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就可以解决了。

  • 相关阅读:
    带宽利用率提升50%,腾讯云联网架构方案解析
    重构实践:基于腾讯云Elasticsearch搭建QQ邮箱全文检索
    存算分离下写性能提升10倍以上,EMR Spark引擎是如何做到的?
    秒级去重:ClickHouse在腾讯海量游戏营销活动分析中的应用
    降本提效,贝壳搜索推荐架构统一之路
    亿级用户,腾讯看点信息流推荐系统的架构挑战
    优秀程序员,如何提高架构能力?
    如何创建体元栅格?
    导出属性表字段结构
    去除镶嵌数据集中影像的黑边或白边
  • 原文地址:https://www.cnblogs.com/cinderlla/p/3851404.html
Copyright © 2011-2022 走看看