zoukankan      html  css  js  c++  java
  • 关于IE、火狐等浏览器兼容问题的总结

      今天整理系统,发现系统很多页面,只有在IE6下显示正常,其它的都不正常,很是奇怪。所以上网找了一些关于浏览器兼容的问题和解决办法,在此我觉得大牛们总结的比较精彩,分享给网友们!  

       一、CSS兼容

    以下两种方法几乎能解决现今所有兼容.

    1, !important (不是很推荐,用下面的一种感觉最安全)

    随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)

    代码: 
    <style> 
    #wrapper { 
    100px!important; /* IE7+FF */ 
    80px; /* IE6 */ 

    </style>

    2, IE6/IE77对FireFox <from 针对firefox ie6 ie7的css样式>

    *+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.

    代码: 
    <style> 
    #wrapper { 120px; } /* FireFox */ 
    *html #wrapper { 80px;} /* ie6 fixed */ 
    *+html #wrapper { 60px;} /* ie7 fixed, 注意顺序 */ 
    </style>

    注意: 
    *+html 对IE7的兼容 必须保证HTML顶部有如下声明:

    代码: 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
    http://w3.org/TR/html4/loose.dtd">

    二、解决DIV错乱(非常重要)

    可以用这个解决多个div对齐时的间距不对,

    关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup] 
    将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.

    代码: 
    <style> 
    /* Clear Fix */ 
    .clearfix:after { 
    content:"."; 
    display:block; 
    height:0; 
    clear:both; 
    visibility:hidden; 

    .clearfix { 
    display:inline-block; 

    /* Hide from IE Mac \*/ 
    .clearfix {display:block;} 
    /* End hide from IE Mac */ 
    /* end of clearfix */ 
    </style>

    三、其它零碎(不容忽视,细节决定成败)

    1. 文字本身的大小不兼容。同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff 下实际占高17px,上留白1px,下留白3px,opera下就更不一样了。解决方案:给文字设定 line-height 。确保所有文字都有默认的 line-height 值。这点很重要,在高度上我们不能容忍1px 的差异。

    2.ff下容器高度限定,即容器定义了height之后,容器边框的外形就确定了,不会被内容撑大,而ie下是会被内容撑大,高度限定失效。所以不要轻易给容器定义height。

    3.横向上的撑破容器问题,。如果float 容器未定义宽度,ff下内容会尽可能撑开容器宽度,ie下则会优先考虑内容折行。故,内容可能撑破的浮动容器需要定义width。

    小实验:有兴趣大家可以看看这段实验。在不同浏览器下分别测试以下各项代码。

    a.<div style=”border:1px solid red;height:10px”></div> b. <div style=”border:1px solid red;10px”></div>

    c. <div style=”border:1px solid red;float:left”></div> d. <div style=”border:1px solid red;overflow:hidden”></div>

    上面的代码在不同浏览器中是不一样的,实验起源于对小height 值div 的运用,<div style=”height:10px;overflow:hidden”></div>,小height 值要配合overflow:hidden一起使用。实验好玩而已,想说明的是,浏览器对容器的边界解释是大不相同的,容器内容的影响结果各不相同。


    4.最被痛恨的,double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案,给浮动容器定义display:inline。

    5.mirror margin bug,当外层元素内有float元素时,外层元素如定义margin-top:14px,将自动生成margin-bottom:14px。 padding也会出现类似问题,都是ie6下的特产,该类bug 出现的情况较为复杂,远不只这一种出现条件,还没系统整理。解决方案:外层元素设定border 或 设定float。

    引申:ff 和ie 下对容器的margin-bottom,padding-bottom的解释有时不一致,似乎与之相关。

    6. 吞吃现象。还是ie6,上下两个div,上面的div设置背景,却发现下面没有设置背景的div 也有了背景,这就是吞吃现象。对应上面的背景吞吃现象,还有滚动下边框缺失的现象。解决方案:使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。

    7.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案,ie6的这个bug 下,大家会在页面看到猪字出现两遍,重复的内容量因注释的多少而变。解决方案:用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。


    8.img 下的留白,大家看这段代码有啥问题:

    <div>
    < img src=”" mce_src=”" />
    < /div>

    把div的border打开,你发现图片底部不是紧贴着容器底部的,是img后面的空白字符造成,要消除必须这样写

    <div>
    <img src=”" mce_src=”" /></div>

    后面两个标签要紧挨着。ie7下这个bug 依然存在。解决方案:给img设定 display:block。

    9. 失去line-height。<div style=”line-height:20px”><img />文字</div>,很遗憾,在ie6下单行文字 line-height 效果消失了。。。,原因是<img />这个inline-block元素和inline元素写在一起了。解决方案:让img 和文字都 float起来。

    引申:大家知道img 的align 有 text-top,middle,absmiddle啊什么的,你可以尝试去调整img 和文字让他们在ie和ff下能一致,你会发现怎么调都不会让你满意。索性让img 和文字都 float起来,用margin 调整。


    10.clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层,这样有问题,不仅仅是ff和op下失去margin效果,ie下某些margin值也会失效
    <div style=”background:red;float:left;”>dd</div>
    < div style=”clear:both;margin-top:18px;background:green”>ff</div>

    11.ie 下overflow:hidden对其下的绝对层position:absolute或者相对层 position:relative无效。解决方案:给overflow:hidden加position:relative或者position: absolute。另,ie6支持overflow-x或者overflow-y的特性,ie7、ff不支持。

    12.ie6下严重的bug,float元素如没定义宽度,内部如有div定义了height或zoom:1,这个div就会占满一整行,即使你给了宽度。float元素如果作为布局用或复杂的容器,都要给个宽度的。

    13.ie6下的bug,绝对定位的div下包含相对定位的div,如果给内层相对定位的div高度height具体值,内层相对层将具有100%的width值,外层绝对层将被撑大。解决方案给内层相对层float属性。

    14.100%这个东西在ie里用很方便,会向上逐层搜索width值,忽视浮动层的影响,ff下搜索至浮动层结束,如此,只能给中间的所有浮动层加100%才行,累啊。opera这点倒学乖了跟了ie。

    四、一句话解决所有兼容性问题(懒人有懒人的办法奥!)

    在网站头部加上一句:

    1. Google Chrome Frame也可以让IE用上Chrome的引擎:

             <meta http-equiv=“X-UA-Compatible” content=“chrome=1″/>

    2.强制IE8使用IE7模式来解析

             <meta http-equiv=“X-UA-Compatible”content=“IE=EmulateIE7″><!– IE7 mode –>

            //或者

             <metahttp-equiv=“X-UA-Compatible”content=“IE=7″><!– IE7 mode –>

    3.强制IE8使用IE6或IE5模式来解析

             <metahttp-equiv=“X-UA-Compatible”content=“IE=6″><!– IE6 mode –>

             <metahttp-equiv=“X-UA-Compatible”content=“IE=5″><!– IE5 mode –>

    4.如果一个特定版本的IE支持所要求的兼容性模式多于一种,如:

             <metahttp-equiv=“X-UA-Compatible”content=“IE=5; IE=8″/>

    我用的是最后一种,不过还是没有彻底解决问题,我也在寻求方法,恳求大牛们帮忙解决!

     
     
    分类: HTML
    标签: HTML浏览器兼容IE6IE7IE8FF
  • 相关阅读:
    每天一道LeetCode--141.Linked List Cycle(链表环问题)
    每天一道LeetCode--119.Pascal's Triangle II(杨辉三角)
    每天一道LeetCode--118. Pascal's Triangle(杨辉三角)
    CF1277D Let's Play the Words?
    CF1281B Azamon Web Services
    CF1197D Yet Another Subarray Problem
    CF1237D Balanced Playlist
    CF1239A Ivan the Fool and the Probability Theory
    CF1223D Sequence Sorting
    CF1228D Complete Tripartite
  • 原文地址:https://www.cnblogs.com/Leo_wl/p/2868958.html
Copyright © 2011-2022 走看看