前端开发中，浏览器兼容问题如何解决？

如何解决浏览器兼容性问题？ 是否可以通过调整css解决浏览器兼容性问题？

让我们来看看。 用这四个解决方案解决CSS浏览器的兼容性问题吧。

对我们来说，网络前端既是高薪专家，同时也是艰苦职业。 不仅是因为技术的更新换代快，更因为应该学习的知识比什么都多。 要解决所有的浏览器兼容性问题并不是一件容易的事，尤其是在浏览器普及到互联网的情况下。

解决CSS浏览器兼容性问题的四种解决方案

为什么会有浏览器兼容性问题？

不是因为浏览器制造商太多！

Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，IE9.360安全浏览器，qq浏览器，世界之窗，TT，Sogou，opera，maxthon

重要的是，即使是不同制造商、甚至同一制造商的不同版本，对同一段的CSS的分析效果也不一致。 这样会导致页面显示效果不一致，还会产生兼容性问题。

多么希望Chrome能统一江湖啊~

解决CSS浏览器兼容性问题的四种解决方案

按浏览器列出的当前市场占有率

浏览器这么多，我们都不是兼容的。 对于用户数一般的产品，只要做好主流浏览器的匹配就可以了。

百度流量研究院提供的2018年8月至2019年2月的数据显示，Chrome占46.28%，IE类仍然占很大比重，反正任重道远啊~

解决CSS浏览器兼容性问题的四种解决方案

CSS浏览器兼容性问题的解决方案和解决方案

今天，我不想关注太多细节的问题。 例如，该css样式需要兼容性，但希望研究较大的解决方案。 主要包括四个方面：浏览器css风格初始化、浏览器私有属性、CSS hack语法和自动化插件。

1 .初始化浏览器CSS样式

因为每个浏览器的css缺省样式都不一样，所以最简单有效的方法是对其进行初始化。 我相信很多朋友都写过这样的代码，在所有的css开始之前，将marin和padding设置为0以避免不同的浏览器显示效果不同。

*{

边距： 0；

padding: 0；

}

关于浏览器CSS样式的初始化，如果没有丰富的经验，可能不知道该初始化什么。 在此，建议使用Normalize.css。 github star的数量接近3.4万，从中选择了几种样式设定进行展示。 如下所示

html {

行高： 1.15；/* correctthelineheightinallbrowsers * /

- web kit-text-size-adjust :100；/* preventadjustmentsoffontsizeafterorientationchangesinios.* /

}

body {

边距： 0；

}

a {

背景颜色：传输；/* removethegraybackgroundonactivelinksinie 10.* /

}

img {

border-style: none；/* removetheborderonimagesinsidelinksinie 10.* /

}

我相信初始化CSS样式可以解决许多常见的兼容性问题，接下来我们来看看浏览器的专用属性。

2 .浏览器的专用属性

我们在常见的CSS属性前添加-webkit-、-moz--ms--等前缀。 这些是浏览器的专用属性。

为什么会出现私人属性呢？ 这是因为制定了HTML和CSS标准的组织W3C动作缓慢。

通常，一个W3C组织的成员会提出一些新的属性，如圆角border-radius，大家都认为很好，但W3C必须制定标准，进行复杂的流程、审核等。 浏览器制造商的营销很花时间，如果一个属性足够成熟，就会给浏览器增加支持。

但是，通过添加专用前缀(如-webkit-border-radius )来预支持新属性，以避免在以后W3C发布标准时发生更改。 日后W3C会公布标准，建立border-radius的标准格式，然后让新版本的浏览器支援border-radius格式。 一般前缀如下

-moz表示firefox浏览器的专用属性

-ms表示IE浏览器的专用属性

-webkit表示chrome，safari的私有属性

-o表示opera的私有属性

注意私有属性的顺序，在标准表示法的最后，将互换表示法放在前面

- WebKit-transform : rotate (-3d eg )； /*是Chrome/Safari*/

-moz-transform3360rotate(-3DEG )； /*是Firefox*/

-ms-transform3360rotate(-3DEG )； /*是IE*/

-o-transform3360rotate(-3DEG )； /*是Opera*/

transform:rotate(-3deg )；

为每个CSS属性编写这样的兼容性代码，无疑是对生命最大的浪费。 稍后我将介绍如何在自动化插件中处理它。

3. CSS hack

您可能需要为不同的浏览器或不同的版本编写特定的CSS样式。 为这种不同的浏览器/不同的版本编写相应的CSS代码的过程称为CSS hack！

CSS hack的写法大致分为条件hack、属性电平hack和选择器电平hack三种。

条件hack

条件hack主要对IE浏览器进行特殊设置

语法：

取得价格

keywords

if后面的条件有六个选择：“否”、“大于”、“大于或等于”、“小于或等于”、“小于或等于”和“非指定版本”

否：指定是IE还是IE的版本。 关键字：空

大于-选择大于指定版本的IE版本。 关键词： gt(greaterthan ) ) ) ) ) ) ) )。

大于或等于：选择大于或等于指定版本的IE版本。 关键字： GTE(greaterthanorequal ) )。

小于：选择小于指定版本的IE版本。 关键字： lt(lessthan ) )。

小于或等于：选择小于或等于指定版本的IE版本。 关键字： LTE(lessthanorequal ) )

非指定版本：选择除指定版本外的所有IE版本。 关键字：

version

IE浏览器版本，如6、7、8

IE10及以上版本已将条件注释特性移除，使用时需注意。

§ 举例

<!--[if IE]>

<p>你在非IE中将看不到我的身影</p>

<![endif]-->

<!--[if IE]>

<style>

.test{color:red;}

</style>

<![endif]-->

<!--[if lt IE 9]>

<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

<![endif]-->

属性级hack

属性hack就是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀。

§ 语法：

selector{<hack>?property:value<hack>?;}

§ 取值：

：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（）更为合适。

：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（）的认知度更高

9：选择IE6+

：选择IE8+和Opera15以下的浏览器

§ 举例

如在不同的IE浏览器中设置不同的颜色，注意顺序：低版本的兼容性写法放到最后

.test {

color: #0909; /* For IE8+ */

*color: #f00; /* For IE7 and earlier */

_color: #ff0; /* For IE6 and earlier */

}

选择符级hack

选择符级hack是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

§ 语法：

<hack> selector{ sRules }

§ 取值：

§ 常见的选择符级hack有

*html *前缀只对IE6生效

*+html *+前缀只对IE7生效

@media screen\9{...}只对IE6/7生效

@media \0screen {body { background: red; }}只对IE8有效

@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效

@media screen\0 {body { background: green; }} 只对IE8/9/10有效

@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

§ 举例：

* html .test { color: #090; } /* For IE6 and earlier */

* + html .test { color: #ff0; } /* For IE7 */

看到这里，我不得不为前端人员自豪，这也太难了吧~~

不过花大力气解决这些兼容性问题， 并不能给我们技术上带来什么大的提升，无非是给各个浏览器厂商填坑罢了，随着时间的流逝，这些技术的价值也会越来越小，怎么花最小的力气解决css兼容性问题，让我们把更多的时间留给美好的生活，才是关键，好在有一些自动化插件可以帮我们从繁重的兼容性处理中解脱处理。

4. 自动化插件

Autoprefixer是一款自动管理浏览器前缀的插件，它可以解析CSS文件并且添加浏览器前缀到CSS内容里，使用Can I Use（caniuse网站）的数据来决定哪些前缀是需要的。

把Autoprefixer添加到资源构建工具（例如Grunt）后，可以完全忘记有关CSS前缀的东西，只需按照最新的W3C规范来正常书写CSS即可。如果项目需要支持旧版浏览器，可修改browsers参数设置 。

//我们编写的代码

div {

transform: rotate(30deg);

}

// 自动补全的代码，具体补全哪些由要兼容的浏览器版本决定，可以自行设置

div {

-ms-transform: rotate(30deg);

-webkit-transform: rotate(30deg);

-o-transform: rotate(30deg);

-moz-transform: rotate(30deg);

transform: rotate(30deg);

}

目前webpack、gulp、grunt都有相应的插件，如果还没有使用，那就赶紧应用到我们的项目中吧，别再让CSS兼容性浪费你的时间！

常见的浏览器兼容性问题与解决方案——CSS篇

1、不同的浏览器的标签默认的外补丁和内补丁不同

问题症状：随便写几个标签，不加样式控制的情况下，各自的margin和padding差异较大。

碰到频率：100%

解决方案：初始化CSS的默认样式，*{margin:0;padding:0}。也可以使用其他网站的初始化代码。

备注：这个是最常见的也是最容易解决的一个浏览器兼容性问题。

2、块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大

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

碰到频率：90%

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

3、设置较小高度标签，在IE6、IE7和遨游浏览器中高度超出自己设置的高度

问题症状：IE6、IE7和遨游浏览器里这个标签的高度不受控制，超出自己设置的高度。

碰到频率：60%

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

4、行内属性标签，设置display：block后采用float布局，又有横行的margin的情况，IE6间距bug

问题症状：IE6里的间距比超过设置的间距。

碰到频率：20%

解决方案：在display：block；后面加入display：inline；display：table；

5、图片默认有间距

问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了margin：0；和padding：0也不起作用。

碰到频率：20%

解决方案：使用float属性为img布局。

6、标签最低高度设置min-height不兼容

问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容。

碰到频率：20%

解决方案：如果我们需要设置一个标签的最小高度是200px，需要进行的设置为：{min-height:200px;height:auto !importtant;height:200px;overflow:visible;}