程序员

跨浏览器问题的五种解决方案(小结)

作者:admin 2021-07-07 我要评论

简评:浏览器兼容性问题常常让人头疼,以下是避免出现这些问题的五个技巧。 1. 前缀 CSS3 样式 如果您正在使用任何类型的现代 CSS 片段,例如框尺寸(box-sizing...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

1. 前缀 CSS3 样式

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

-moz- /* Firefox 和其他使用 Mozilla 浏览器引擎的浏览器 */
-webkit- /* Safari,Chrome 和其他使用了 Webkit 引擎的浏览器 */
-o- /* Opera */
-ms- /* IE 浏览器(但不总是 IE) */

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 等 WebKit 内核浏览器 */
-moz-box-sizing: border-box; /* Firefox 等 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
如果你让这些东西成为一种习惯,大概可以搞定九成的浏览器问题。

原文链接:

5 Tricks to Avoid Cross Browser Issues

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


原文链接:https://m.jb51.net/web/685791.html

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 单链表全解(从零开始)——数据结构(C语

    单链表全解(从零开始)——数据结构(C语

  • 每天学一个jquery插件-做一个便签

    每天学一个jquery插件-做一个便签

  • 跟踪多个 Git 远程仓库

    跟踪多个 Git 远程仓库

  • ARM版Windows 10用户狂喜 微软全新补丁

    ARM版Windows 10用户狂喜 微软全新补丁

腾讯云代理商
精彩导读
海外云服务器
热门资讯
腾讯云代理商