关于web项目在不同浏览器中的兼容问题及解决方式

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

1 问题描述

在本人亲身跟进一些前端项目过程中，发现相同的项目在不同的浏览器中运行出来的展示效果不太一样。上网查询下发现这样的现象叫浏览器兼容问题。那么问题来了：为什么会有兼容问题呢？

2 问题分析

在仔细了解浏览器方面的知识与H5特性之后，我发现市面上虽然有着种类繁多的浏览器，但不同的浏览器其自身的内核是不一样的，（内核可以理解成浏览器解析代码的心脏）因此不同的浏览器对于同样的代码的解析结果是不一样的，这就是导致兼容问题的最重要的原因。因此我们想要开发出一个能够推入实用阶段的网页就必须要解决网页在当前主流浏览器上的兼容问题。

对浏览器的兼容问题，又细分了如下几类：HTML兼容、Javascript兼容、css兼容。而HTML的问题比较好解决，其原因在于在低版本浏览器中运行了包含高版本浏览器涉及的元素，使得浏览器本身无法解析。

3 解决方案

现在让我们来看一看我总结出来的常见的兼容问题以及解决方案：

问题一：不同浏览器的标签默认的外补丁和内补丁不同

问题症状：我们随意写几个标签，在不使用样式控制的前提下，运行出来的margin、padding差别很大。

解决方案：css里添加*

注意：这个问题本身是我们在这类问题中最常见的一个问题，因此几乎所有的网页css文件开头都需要使用通配符*来对标签的内外补丁统一为0.

问题二：图片默认有间距

问题症状：几个img标签放在一起的时候，个别浏览器中会出现图标之间有默认边距的问题，而且加上上文提到的通配符也不起作用。

解决方案：使用float属性浮动流来对img进行布局。

注意：因为img标签属于是行内标签，因此在不超出容器本身宽度的情况下，img标签通常是排在第一行的，但在少部分浏览器中的img标签之间会存在间距。此时使用float浮动流是最方便简单的方法。

问题三：标签最低高度设置min-height不兼容问题

问题症状：min-height本身就是一个不兼容css的属性，因此在设置min-height属性的网页就不能很好的被各浏览器兼容。

注意：这个问题也是在大咖的帮助下涉及到的，所以实战中遇到的可能性很低。

解决方案：假如我们要设置一个标签的最小高度为200px，需要进行这样的设置：

问题四：块属性标签float后，又有横行的margin情况下，在部分浏览器版本中显示的margin比设置的值大

问题症状：常见症状是在ie6中，后面的一块被顶到下一行。

解决方案：在float的标签样式控制中加入如下属性：display:inline;将其转化为行内属性。

问题五：设置较小高度的标签，在ie6\7中显示出来的高度超出设置值

问题症状：在ie6\7中，这个标签的高度不受样式css等控制。

解决方案：给超出高度的标签设置overflow:hidden；或者设置行高line:height小于你设置的高度。

4 总结

在开发这条路上遇到问题是小事，遇到问题说明你的知识还不够丰富，技术还不够成熟，也正是在解决这些问题的路上自身才能不断成长。因此难的不是问题本身，而是如何解决。在此希望读者能在今后的开发路上养成遇到问题先思考后动手的好习惯

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！