浏览器兼容性问题及处理

来源：互联网发布：mac 试色编辑：程序博客网时间：2024/05/20 00:13

一、ie6常见的问题
直接贴代码记录一下：

<!doctype html><html><head>    <meta charset="utf-8">    <title>处理兼容性问题</title>    <style type="text/css">        img.bug1 {            width: 300px;            border: 0;            /* 解决bug1的方法 */        }        div.bug2 {            border: 1px solid red;            overflow: hidden;        }        .bug2 img {            width: 300px;            /* display: block; */            float: left;        }        div.bug3 {            width: 500px;            height: 300px;            background-color: orange;            float: left;            margin-top: 50px;            _display: inline;            /* _是ie6识别标志 */        }        div.bug4 {            border: 1px solid red;            *font-size: 0px;            /* *是ie6和oe7识别标志 */            /* overflow:hidden; */        }        .bug51 {            background-color: pink;            width: 50%;            height: 30px;            float: left;        }        .bug52 {            background-color: orange;            width: 50%;            height: 30px;            float: right;        }    </style></head><body>    <!-- bug1:图片有边框：图片加上a标签后，IE浏览器里图片上面会出现边框                解决办法：border:0 -->    <!--  <a href="#">        <img class='bug1' src="./plant.jpeg"/>    </a> -->    <!-- bug2:图片间隙：图片外面套上div标签后，会产生缝隙                 解决办法：display:block;或者float:left;-->    <!-- <div class='bug2'>        <img src="./plant.jpeg" />    </div> -->    <!-- bug3:双倍浮向（双倍边距），只有IE6出现。浏览器解析浮动元素时，错误把浮向边界加倍显示                解决办法：display:inline-block -->    <!-- <div class="bug3"></div> -->    <!-- bug4:默认高度（ie6、ie7）:在ie6及以下版本中，部分块元素拥有默认高度（在16-20px左右）                解决办法：给元素添加申明：font-size:0;或者overflow:hidden -->    <!-- <div class="bug4"></div> -->    <!-- bug5:表单元素行高不一致。解决办法：给表单元素float:left -->    <!-- bug6:ie6的百分比bug:50%+50%!=1;解决办法：clear:right; -->    <div class="bug5">        <div class="bug51"></div>        <div class="bug52"></div>    </div>    <!-- bug7:透明属性bug。因为opacity的取值：ie是0-100,其他浏览器是0-1                解决方法：filter:alpha(opacity=value) -->    <!-- bug8: 当前元素（父元素中的第一个子元素）与父元素没有设置任何浮动的情况下，设置margin-top后，会错误的把margin-top加载父级元素上                解决方法：父元素加overflow:hidden或者父或者子加浮动--></body></html>

二、让老式浏览器兼容h5和css3（此处摘录别人笔记）

1：加载兼容文件JS

因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：

<!--[if lt IE 9]>  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script><![endif]-->

2：设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)

现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:

为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

太给力了。

不过我最近又发现了一个更给力的写法：

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

怎么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上，不过不用也是可以的。

阅读全文

0 0