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

本文主要是介绍浏览器兼容性问题以及解决方法1，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前端工程师在开发的过程中，遇到最头疼的莫过于是浏览器的兼容性问题，常常为了实现一个兼容各种浏览器的效果绞尽脑汁。我们平时在写前端代码的时候，在排版时也是会遇到各种兼容性问题，尤其是老板要求要兼容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下的效果：