浏览器兼容性问题以及解决方法1

来源：互联网发布：软件界面素材下载编辑：程序博客网时间：2024/05/21 16:58

前端工程师在开发的过程中，遇到最头疼的莫过于是浏览器的兼容性问题，常常为了实现一个兼容各种浏览器的效果绞尽脑汁。我们平时在写前端代码的时候，在排版时也是会遇到各种兼容性问题，尤其是老板要求要兼容IE5、IE6、IE7的时候。接下来我总结几个我遇到的兼容性问题以及解决方法，后续遇到会慢慢更新。

1、H5标签兼容 IE5、IE6不兼容

H5标签在IE5、IE6不兼容下不兼容。为了说明这个问题，我先写一个小小的例子，代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>H5</title>    <style>        header{            width:200px;            height:200px;            display: block;            background-color: #34b1ff;        }        section{            width:150px;            height:150px;            background-color: #ff54c5;        }        footer{            width:100px;            height: 100px;            background-color: #73ff58;        }    </style></head><body>    <header>header</header>    <section>session</section>    <footer>footer</footer></body></html>

在Chrome的浏览器下：

因为我电脑上没有IE6，所以我用IETester进行测试，在IE6下的显示结果：

为了解决这个问题，我们可以手动创建H5标签，但是如果所有H5标签都需要这样一个一个去创建的话，过程很麻烦，不过这里先写一下具体是怎么创建的。Js代码如下：

    <script>        document.createElement("header");        document.createElement("section");        document.createElement("footer");    </script>

显示结果：

发现这三个元素没有按照我定义的宽高进行显示，这是为什么呢？这是因为通过js创建的元素被认为是自定义标签，默认是内联元素，而如果想按照固定的宽高进行显示的话，必须是块元素，所以为了实现这个效果，我们可以给每个元素的样式中添加display:block。这样效果就达到了。样式代码修改如下：

        header{            width:200px;            height:200px;            display: block;            background-color: #34b1ff;        }        section{            width:150px;            height:150px;            display: block;            background-color: #ff54c5;        }        footer{            width:100px;            height: 100px;            display: block;            background-color: #73ff58;        }

这里有一个问题是，如果我们需要非常非常多的标签，每个元素都要自己一个一个创建就非常麻烦，那么我们可以通过引入一个H5 JS插件来实现。这里我采用了html5shiv.js，因为无法上传，需要的话可以私下找我要。实现代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>H5</title>    <script src="js/html5shiv.js"></script>    <style>        header{            width:200px;            height:200px;            background-color: #34b1ff;        }        section{            width:150px;            height:150px;            background-color: #ff54c5;        }        footer{            width:100px;            height: 100px;            background-color: #73ff58;        }    </style></head><body>    <header>header</header>    <section>session</section>    <footer>footer</footer></body></html>

2、元素浮动之后，能设置宽度的话就给元素设置宽度；如果需要宽度是内容撑开的，就给它里边的块元素加上浮动

这个什么意思呢？我们来举个例子说明，我先写一个html的结构和想要达到的效果，我们现在写了下面的结构，想要实现的效果就是两个div分别显示在左右两边：

<div class="box">    <div class="left">        <h2>左边</h2>    </div>    <div class="right">        <h2>右边</h2>    </div></div>

样式代码：

        .box{            width:400px;            border:1px solid #00A2E9;            overflow: hidden;        }        .left{            background-color: yellow;            float: left;        }        .right{            background-color: red;            float: right;        }        h2{            margin: 0;            height: 30px;        }

在Chrome下的效果是：

但是看到IE6下的效果，我傻了，我不是都设置了左右浮动了吗，为什么结果是这样的！

接下来说一下解决方法：

1）给元素设置宽度

修改h2的代码如下：

        h2{            margin: 0;            height: 30px;            width: 100px;        }

在IE6下的结果现在达到了：

2）如果需要宽度是内容撑开的，就给它里边的块元素加上浮动

现在问题来了，有时候我不知道里面的h2到底要多宽，我需要根据内容进行撑开，所以就不能设置统一的width，此时，可以通过给h2这个块元素加上浮动。

修改代码如下：

        h2{            margin: 0;            height: 30px;            float: left;        }

在IE6下的效果完成了：

3、第一块元素浮动，第二块元素加上margin值等于第一块元素的宽度，在IE6下会有间隙问题

首先还是抛砖引玉举一个例子：

<div class="box">    <div class="left"></div>    <div class="right"></div></div>

样式：

        body{            margin: 0;        }        .box{            width: 500px;        }        .left{            width: 200px;            height: 200px;            background-color: #ff89d9;            float: left;        }        .right{            width: 200px;            height: 200px;            background-color: #34b1ff;            margin-left: 200px;        }

在IE6下的效果：

怎么在两个div中间多了一条间隙！大家都会很好奇这是为什么，原因其实我也不知道，因为我在前面已经增加了一句margin:0。但是效果还是会有这样的一条间隙。因为第一个div是浮动的，脱离了文档流，而第二个div仍然在文档流中，让两个排在同一行，确实是出现我们想不到的问题，一般不建议这么写，如果真的要这么写的话，那么我们就给第二个元素也增加浮动。

修改的代码：

        .right{            width: 200px;            height: 200px;            background-color: #34b1ff;           /* margin-left: 200px;*/            float: left;        }

大家对比一下，原来我是想要通过设置margin-left来让第二个div自动往右移动。现在我是将这条代码去掉，直接加上了浮动。效果如下（完美地去掉了那条间隙）：

4、IE6下子元素超出父级宽高，会把父级的宽高撑开

首先还是抛砖引玉举一个例子：

<div class="box">    <div class="content"></div></div>

样式代码：

        .box{            width: 100px;            height:100px;            background-color: #34b1ff;            border: 2px solid #ff2834;        }        .content{            width: 200px;            height: 200px;            background-color: #73ff58;        }

在Chrome下的效果是：

在IE6下的效果：

子元素的div居然把父级元素的宽高撑开了，那么我们在写代码的过程中一定要注意不要让子元素的宽高超出父元素的宽高。

5、P包含块元素嵌套规则

首先还是抛砖引玉举一个例子：

<p>    <div>div</div></p>

效果显示：

效果显示上没有什么问题，但是用审查元素一看，发现问题了，P标签自动结束了而且还自动增加了一个p标签，所以我们在平时写代码的过程中，一定标签包含嵌套关系，那么除了p标签会出现这个问题以外，还有两个标签也会出现这个问题：td、h：

1 0