浏览器的兼容性详解

最新推荐文章于 2022-04-07 17:34:56 发布
最新推荐文章于 2022-04-07 17:34:56 发布
阅读量394 收藏
点赞数 1
分类专栏： 笔记 文章标签： html5 ie 6 html 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010178118/article/details/51367507
版权
  1. html5标签的兼容性，由于IE6/IE7/IE8出来的较早，不支持html5标签，解决方案有两种。
    (a)通过js在IE6/IE7/IE8中创建html元素，然后认为的添加一些默认的样式。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
          <!-- 创建元素 -->
          document.createElement("header");
          document.createElement("section");
          document.createElement("footer")
    </script>
    <style>
           header{
              width:300px;
              height:300px;
              background:red;
              /*添加默认的样式*/
              display: block;

           }

           section {
              width:200px;
              height:200px;
              background:yellow;        
              display: block;         
           }

           footer {
              width:100px;
              height:100px;
              background: blue;
              display: block;
           }
    </style>
</head>
<body>
      <header>header</header>
      <section>section</section>
      <footer>footer</footer>
</body>
</html>

如上面代码片段，IE6/IE7/IE8中并不存在html5标签<header><section><footer>可以先创建标签，然后添加对应的样式。缺点：如果有很多html5标签，都需要进行创建，比较麻烦。j

(b)引用js文件,html5shiv.js，引用这个js文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="html5shiv.js"></script>
    <style>
           header{
              width:300px;
              height:300px;
              background:red;


           }

           section {
              width:200px;
              height:200px;
              background:yellow;        

           }

           footer {
              width:100px;
              height:100px;
              background: blue;

           }
    </style>
</head>
<body>
      <header>header</header>
      <section>section</section>
      <footer>footer</footer>
</body>
</html>

这样也可以解决html5标签的兼容性。
2.元素浮动之后，能设置宽度的话就给元素加宽度，如果需要宽度是内容撑开，则给里面的块元素加浮动。解决了IE6浏览器的兼容性，使浮动的块级元素可以在一行显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
          .box {
             overflow: hidden;
             width: 500px;
             background: red;
          }
          .left{
              float:left;

          }
          .right{
              float:right;
          }

          h3{
            padding: 0;
            margin: 0;
            height:30px;
          }
    </style>
</head>
<body>
      <div class="box">
          <div class="left">
              <h3><a href="">左边</a></h3>
          </div>
          <div class="right">
              <h3><a href="">右边</a></h3>
          </div>


     </div>
</body>
</html>

在IE6浏览器下测试如上的代码，会发现“左边”与“右边”两个div并不在同一行显示。所以正确的解决方案是给浮动的元素的块级子元素加上浮动。即为给里面的h3标签添加浮动。因为块级元素默认撑开一行的，所以我们也可以给可以为块级元素(父级块元素或者子级块元素添加添加宽度，不让它们撑满一行)，这两个解决方案都可以解决IE6不在一行显示的问题。

3.第一块元素浮动，第二块元素加margin值等于第一块元素的宽度，在IE6会存在间隙的问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
          .box {
              width:500px;
              height: 500px;
              background-color: red;
          }

          body{
              margin:0;
          }

          .left {
               width: 200px;
               height: 200px;
               float: left;
               background-color: green;
          }
          /*第一块元素浮动，第二块元素加margin值等于第一块元素的宽度*/
          .right{
               width: 200px;
               height: 200px;
               margin-left: 200px;
               background-color: blue;
          }

    </style>
</head>
<body>
      <div class="box">
        <div class="left"></div>
        <div class="right"></div>
      </div>
</body>
</html>

在IE6下上例中的两个div块会存在间隙，因为浮动会破坏文档流，提升文档的层级，所以正确的做法给第二块元素也添加浮动，这样的文档流处在同一个层级就不会出现这个问题了。当然最好不要采用例子中的写法，免得带来意想不到的问题。
4. IE6下子元素超出父级元素的宽高，会把父级元素的宽高撑开

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         .box{
              width:100px;
              height:100px;
              background-color: red;
              border:10px black solid;
         }
         .item{
              height:200px;
              background-color: green;
         }
    </style>
</head>
<body>
    <div class="box">
        <div class="item">

        </div>
    </div>
</body>
</html>

这个问题就比较严重了，影响布局。解决方案：原则上不允许子元素超出父级元素的宽高。
5. p,td,h标签不能嵌套块元素。
6. margin的兼容性问题。首先熟悉margin的特性：margin-top向上传递,相邻元素的上下margin叠加在一起的。首先，解决margin传递的问题，给父级元素添加border样式，同时为了兼容IE6,7浏览器需要触发haslayout,因而加上*zoom:1;如下面的代码片段：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
          .box {
              background-color: green;
              border:solid 1px #000;
              *zoom:1;
          }

          .item{
              margin:50px;
              width: 200px;
              height:200px;
              background-color: red;
          }
    </style>
</head>
<body>
       <div class="box">
            <div class="item"></div>
            <div class="item"></div>
       </div>
</body>
</html>

至于margin叠加，尽量使用一个方向的margin就可以了。
8. IE6下浏览器最小高度的问题。IE6下的div拥有最小的高度19px; 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         div{

             height:1px;
             background-color: red;
             /*兼容IE6下浏览器的最小高度*/
             *overflow: hidden;
         }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

给元素添加*overflow:hidden;即可以解决对IE6浏览器的兼容。
9.IE6下双边距。IE6下当元素浮动之后再设置margin值，就会产生双边距的问题。当然只有margin-left才能产生双边距。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
           div {
               width:100px;
               height:100px;
               margin-left:50px;
               background-color: red;
               float:left;
           }
    </style>
</head>
<body>
    <div>
        div
    </div>
</body>
</html>

解决方法，给元素加上*display:inline;这样即可以解决对IE6的兼容。
10. li里元素都浮动，在IE6,7下会产生4px的间隙问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         .list {
             width: 300px;
             list-style: none;
             padding: 0;
             margin: 0;
         }

         .list li{
             border:solid 1px #000;  
             overflow: hidden;
             /*解决对IE6，7的兼容性*/
             *vertical-align: top;

         }

         a{
            float:left;
         }

         span {
            float:right;
         }
    </style>
</head>
<body>
    <ul class="list">
        <li>
            <a href="">左边</a>
            <span>右边</span>
        </li>
    <li>
            <a href="">左边</a>
            <span>右边</span>
        </li>
    </ul>

</body>
</html>
  1. IE6下绝对定位元素，父级宽高是奇数，绝对定位元素的right和bottom会有1px的偏差
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         .box {
             width:307px;
             height:307px;
             position: relative;
             background-color: green;
         }

         .content {
             position: absolute;
             width:30px;
             height: 30px;
             background-color: red;
             right: 0px;
             bottom: 0px;
         }

    </style>
</head>
<body>
    <div class="box">
        <div class="content"></div>
    </div>


</body>
</html>

解决方法：不要让绝对定位元素的父级宽高为奇数.
12. IE6下文字溢出bug,浮动元素之间有注释或者内联元素，并且和父级元素宽度之差小于3px;在IE6会产生文字溢出bug.解决方案：两个浮动元素之间不允许有内联元素或者注释，或者子元素宽度和父级元素宽度之差大于3px;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
           .left{
                float: left;
           }

           .right{
               float: right;
               width:400px;
           }

           .wrap {
               width:400px;
           }


    </style>
</head>
<body>
      <div class="wrap">
          <div class="left"></div>
          <span></span>
          <div class="right">&darr;cdcdascdcdacadcacacd多出来的这是</div>
      </div>

</body>
</html>
  1. IE6,7 下父级元素的overflow:hidden;包含不住子集元素的position:relative;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
          .box {
              width: 200px;
              height: 200px;
              background-color: red;
              border: solid #000 solid;
              overflow: hidden;
              /*给父级元素添加相对定位*/
              *position: relative;
          }

          .content {
              width: 400px;
              height: 400px;
              background-color: blue;
              position: relative;
          }

    </style>
</head>
<body>
    <div class="box">
        <div class="content"></div>
    </div>
</body>
</html>

解决方案：给父级元素添加*display:inline;
14. IE6下绝对定位元素和浮动元素并列，绝对定位元素消失.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
          .box{
               width:200px;
               height:200px;
               border:solid 1px #000;
               position: relative;
          }
          .item {
                width:150px;
                height:150px;
                float:left;
                background-color: red;

          }
           span {
                width:50px;
                height:50px;
                background-color: yellow;
                display: block;
                position: absolute;
                top:-10px;
                right: -10px;
           }
    </style>
</head>
<body>
    <div class="box">
        <div class="item"></div>
        <span></span>
    </div>
</body>
</html>

解决方案：不让绝对定位元素和浮动元素并列，这样绝对定位元素就不会消失。
15， IE6,7,8,9下的input间隙问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
          .box {
               width: 200px;

               border: solid #000 1px;
               background-color: red;
          }

          input {
              width: 200px;
              height:30px;
              border: 0;
              *float: left;
          }
    </style>
</head>
<body>
      <div class="box">
         <input type="text">
      </div>
</body>
</html>

会出现上下各1px的偏差，解决方法是添加float:left;提升文档流层级半级。

16.IE 6，7,8下输入类型控件背景问题，背景会发生移动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         input {
             /**/
             background: url(mail.jpg) no-repeat fixed;

         }
    </style>
</head>
<body>
     <input type="text">
</body>

加上fixed样式即可。

css hack针对不同的浏览器写不同的CSS样式,\9针对所有IE10之前的浏览器，*针对IE7之前的浏览器,_针对IE6之前的浏览器.

17.IE6不支持png24图片，解决办法是引用一个DD_belatedPNG_0.0.8a.js库即可

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/DD_belatedPNG_0.0.8a.js"></script>
        <script>
            DD_belatedPNG.fix("img, div");
        </script>
        <style>
            body{
                background-color: red;
            }
            div{
                width: 300px;
                height: 300px;
                background: url("img/png.png") no-repeat;
            }
        </style>
    </head>
    <body>
        <div></div>
        <img src="img/png.png" alt="" />
    </body>
</html>

但是这个方法不支持body下的png24的处理，_background-image:none;_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”XX.png”, sizingMethod=”crop”);添加滤镜的方式来让IE6支持png-24的格式。

_MLi
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浏览器兼容性问题详解
凉凉
06-17 610
今天，特意去查看了标签内的属性，总算明白了一点： X-UA-Compatible是针对IE8新加的一个设置，对于IE8之外的浏览器是不识别的，这个区别与content="IE=7"在无论页面是否包含指令，都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循指令。对于多数网站来说，它是首选的兼容性模式。     
详解Vue Cli浏览器兼容性实践
11-20
在处理浏览器兼容性问题之前，我们先来看一下现在的浏览器市场份额是怎样的，:backhand_index_pointing_down:下面是来自statCounter的数据，基本上覆盖了全世界浏览器市场份额的统计，而且前端er经常使用的caniuse所...
浏览器兼容性说明
weixin_30367945的博客
06-26 195
测兼容性，主要测试的浏览器如下： 其实说到底也就是四个主流浏览器 1. IE8以上，360极速/ 安全浏览器、搜狗（Trident内核） 2. 火狐（Gecko内核） 3. google（Blink内核） 4. 苹果、遨游浏览器（Gecko内核） 转载于:https://www.cnblogs.com/kaibindirve...
浏览器兼容性及处理方案 小结
DOM曼珠沙华的博客
06-01 405
浏览器兼容性问题，往往是个别浏览器对一些标准定义不一致导致的。 常用的浏览器及对应内核如下： 浏览器 内核 IE Trident Firefox Gecko chrome 先为webkit，后为blink（与opear共同开发） Safari webkit Opear blink CSS兼容性问题 浏览器兼容性导致的问题： 1.不同浏览器对解析标签默认的内边距和外边距不同 解决方式：*{ margin: 0; padding: 0;} 2.IE6双边距问题；在 IE6中设
21、浏览器兼容性问题
sunnnnh的博客
06-02 1124
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。 浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同 问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。 解决方案：在css中使用通配符 * 备注：这个是最常见的也是最易解决的一个
各大浏览器兼容性报告
senlin1202的博客
03-04 1355
IE、FF、Safari、OP不同浏览器兼容报告 1         浏览器内核简介   Trident IE浏览器(GreenBrowser绿色浏览器, 遨游浏览器....都是IE) Geckos FireFox Presto Opera Webkit Safari、Chrome   浏览器最重要或者说核心的部分是“Rendering
window.open()详解及浏览器兼容性问题示例探讨
09-04
浏览器兼容性问题 #### 标注1： 在IE7、IE8、Firefox、Chrome和Safari中，如果`menubar`设为`yes`，默认不显示菜单栏，需按`ALT`键才会显示。反之，设为`no`，即使按`ALT`键也不会显示。 #### 标注2： Safari中，...
浏览器兼容性及其解决方案整理
weixin_47450807的博客
04-07 5006
一、了解浏览器 主流浏览器：IE(Trident内核)、Firefox(火狐：Gecko内核)、Safari(苹果：webkit内核)、Google Chrome(谷歌：Blink内核)、Opera(欧朋：Blink内核) 四大内核:Trident(IE内核)、Gecko(Firefox内核)、webkit内核、Blink(Chrome内核) 二、了解兼容问题 W3C对标准的推进，Firefox，Chrome，Safari，Opera的出现，结束了IE雄霸天下的日子。 然而，这对开发者来说，是好事，也是坏事
最全整理浏览器兼容性问题与解决方案
热门推荐
weixin_38536027的博客
02-26 10万+
常见浏览器兼容性问题与解决方案　　所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。　　在学习浏览器兼容性之前，我想把前端开发人员划分为两类：　　第一类是精确按照设计图开发的...
浏览器兼容性问题
lidan3636的博客
06-25 2642
一通用头部样式https://zhidao.baidu.com/question/488543156.html使用Trident内核的浏览器：IE、Maxthon、TT；使用Gecko内核的浏览器：Netcape6及以上版本、FireFox；使用Presto内核的浏览器：Opera7及以上版本；使用Webkit内核的浏览器：Safari、Chrome。二  html兼容问题主要是新的html5增加...
浏览器兼容性问题解决方案 · 总结
逆夏的博客
08-29 4万+
浏览器兼容性问题解决方案 · 总结普及：浏览器的兼容性问题，往往是个别浏览器（没错，就是那个与众不同的浏览器）对于一些标准的定义不一致导致的。俗话说：没有IE就没有伤害。贴士：内容都是自己总结的，不免会出现错误或者bug，欢迎更正和补充，本帖也会不断更新。Normalize.css不同浏览器的默认样式存在差异，可以使用 Normalize.css 抹平这些差异。当然，你也可以定制属于自己业务的 re
浏览器兼容性问题2（持续更新中）
weixin_30664615的博客
12-28 838
1. HTML对象获取问题 FireFox：document.getElementById("idName"); ie:document.idname或者document.getElementById("idName"). 解决办法：统一使用document.getElementById("idName"); 2. const问题 说明:Firefox下,可以使用const关键字或...
浏览器兼容性问题以及解决方法1
Wendy
02-10 7246
前端工程师在开发的过程中，遇到最头疼的莫过于是浏览器的兼容性问题，常常为了实现一个兼容各种浏览器的效果绞尽脑汁。我们平时在写前端代码的时候，在排版时也是会遇到各种兼容性问题，尤其是老板要求要兼容IE5、IE6、IE7的时候。接下来我总结几个我遇到的兼容性问题以及解决方法，后续遇到会慢慢更新。 1、H5标签兼容   IE5、IE6不兼容     H5标签在IE5、IE6不兼容下不兼容。为了说明这
常见浏览器兼容性问题及解决方法（一）
choco_xp的博客
04-14 884
浏览器兼容性问题及解决方法针对浏览器兼容问题将前端工作人员分为两类主要问题CSS hack 针对浏览器兼容问题将前端工作人员分为两类 一：精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都死浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。 二：是基本按照设计...
浏览器兼容性问题总结
越努力，越幸运！
02-17 2419
1、HTML对象获取问题 其他浏览器： document.getElementById("idName"); IE浏览器： document.idname document.getElementById("idName"); 解决办法： document.getElementById("idName"); 2. const定义常量问题 其他浏览器： document.getElementById("idName"); IE浏览器： document.idname doc..
常见的浏览器兼容性问题总结（有自己遇到的还有网上大神总结的）
zhuwanwanshay的博客
07-11 1万+
常见的浏览器兼容性问题总结 1. 不同浏览器的标签默认外补丁margin和内补丁padding不同 发生概率：100% 解决方案：使用CSS通配符*，设置内外补丁为0 *{ margin: 0; padding: 0;} 2.  块属性标签float之后，又有横向的margin值，在IE6中显示会比设置的大（IE6双边距bug）    发生概率：90%    解决方案：在floa
韩顺平javascript基础与浏览器兼容性详解
这些笔记对于初学者来说，不仅提供了JavaScript基础概念的讲解，还介绍了如何在实际项目中有效地使用JavaScript，包括代码布局、事件处理和浏览器兼容性考虑。通过深入学习和实践，读者可以提升自己的前端开发技能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值