跨浏览器问题的五种解决方案

今天药忘吃喽~ 2022-01-16 05:53 200阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

![1240][]

> **简评：** 浏览器兼容性问题常常让人头疼，以下是避免出现这些问题的五个技巧。

## 1. 前缀 CSS3 样式 ##

如果您正在使用任何类型的现代 CSS 片段，例如框尺寸（box-sizing）或背景剪辑（background-clip），请确保使用适当的前缀。

-moz- /* Firefox and other browsers using Mozilla's browser engine */
    -webkit- /* Safari, Chrome and browsers using the Webkit engine */
    -o- /* Opera */
    -ms- /* Internet Explorer (but not always) */

## 2. 使用 reset ##

您可以使用 normalize.css，下面是我用的，来自 Genesis Framework Style Sheet。

html,body,div,span,applet,object,iframe,h1,h2,
    h3,h4,h5,h6,p,blockquote,a,abbr,acronym,address,
    big,cite,del,dfn,em,img,ins,kbd,q,s,samp,small,
    strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,
    dd,ol,ul,li,fieldset,form,label,legend,table,caption,
    tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
    embed,figure,figcaption,footer,header,hgroup,input,menu,
    nav,output,ruby,section,summary,time,mark,audio,video {
    border: 0;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    }

## 3. 避免填充宽度 ##

当你添加宽度为一个元素的填充时，它会变得更大。宽度和填充将被加在一起。

要解决这个问题，可以添加这个：

* { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; }

## 4. 清除 float ##

如果没有清除，很容易出问题。感兴趣的可以看看 Chris Coyier 的这篇文章。

可以使用此 CSS 代码片段来清除：

.parent-selector:after {
    content: "";
    display: table;
    clear: both;
    }

如果你包装大部分的元素，一个非常简单的方法是将它添加到你的 wrap 类中。

.wrap:after {
    content: "";
    display: table;
    clear: both;
    }

搞定！

## 5. 测试 ##

创建您自己的跨浏览器基础架构或仅使用[ Endtest][Endtest]。

如果你让这些东西成为一种习惯，大概可以搞定九成的浏览器问题。

--------------------

> **原文链接：**[5 Tricks to Avoid Cross Browser Issues][] **推荐阅读**：[YouTube 上有哪些自学编程的优质频道][YouTube]

**欢迎关注**：知乎专栏「[极光日报][Link 1]」，每天为 Makers 导读三篇优质英文文章。

![1240 1][]

转载于:https://my.oschina.net/jpushtech/blog/3058383

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/0cfe87b723594867929814cf6afc84b9.png
[1240]: /images/20220114/99857cfc83734cfeaf1481a6ac65146b.png
[Endtest]: http://endtest.io/
[5 Tricks to Avoid Cross Browser Issues]: https://zhuanlan.zhihu.com/p/68037607
[YouTube]: https://zhuanlan.zhihu.com/p/24605410
[Link 1]: http://y0.cn/jianshu
[1240 1]: /images/20220114/8df8cc1215e04711bfc7b54e51a3977a.png