防止无须要的访问器适配性难题的5个技能

日期:2021-01-20 类型:科技新闻 

关键词:上线了小程序官网,年会抽奖小程序免费,做小程序,小程序网站,跑腿小程序

本文作者:John Howard 
编译程序:胡须大哈

汉语翻译原文:http://huziketang.com/blog/posts/detail?postId=58d8f4d17413fc2e8240855e 
英文联接:5 Tricks to Avoid Cross Browser Issues

转载请注明出处,保存原文连接和作者信息内容

访问器适配性难题一直令人很头疼,这里详细介绍几个技能来防止这个难题。

 1. CSS3 设计风格的前缀

假如你正在应用全新的 CSS 编码,例如 box-sizing,或 background-clip等,保证你应用了适合的供货商前缀。  

-moz- /* Firefox 和别的应用 Mozilla 访问器模块的访问器 */
-webkit- /* Safari,Chrome 和别的应用了 Webkit 模块的访问器 */
-o- /* Opera */
-ms- /* IE 访问器(但不一直 IE) */

2. 应用款式重设

你可使用 normalize.css 或别的从互联网上能寻找的款式重设都可以以。这里我得出1个,来自于 Genesis 架构。

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. 防止 padding 和 width 1起应用

当你给1个包括 width 的元素加 padding,那它具体显示信息的要比本应显示信息的大。由于 width 和 padding 会加到1起。例如1个元素 width 是 100px,又给它加了1个 10px 的 padding。那一些访问器会将该元素显示信息成 120px。

以便 fix 这个难题,像下面这样做:

* { -webkit-box-sizing: border-box; /* Safari/Chrome 等 WebKit 核心访问器 */
-moz-box-sizing: border-box; /* Firefox 等 Gecko 核心访问器 */
box-sizing: border-box; }

4. 清除波动

保证你把波动都清除掉了,假如不清除掉,将会会出現很怪异的状况。要想掌握更多有关访问器解决波动的基本原理,能够看 Chris Coyier 的这篇文章内容。

能够用下面 CSS 编码清除波动:

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

假如你要把你的绝大多数编码都包起来,有个更简易的方式便是把它加上到你的 wrap 类里边:

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

这样你的波动就被清除掉了。

5. 检测1下

构建你自身的跨访问器检测自然环境,或用 Endtest 还可以。

假如你让这 5 个技能变成你平常开发设计的习惯性,会防止你 95% 的跨访问器兼容问题的难题。