本文作者：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% 的跨访问器兼容问题的难题。
Copyright © 2002-2020 秀米制作h5_h5如何制作_h5小游戏制作_h5游戏开发_免费的h5制作网站 版权所有 （网站地图） 粤ICP备10235580号