跨访问器难题的5种处理计划方案(小结)

日期:2021-03-23 类型:科技新闻 

关键词:在线编辑图片,什么软件可以抠图,在线图片,p图软件电脑版,在线抠图

简评:访问器适配性难题经常令人头疼,下列是防止出現这些难题的5个技能。

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. 防止填充宽度

当你加上宽度为1个元素的填充时,它会变得更大。宽度和填充将被加在1起。
要处理这个难题,能够加上这个:

* { -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;
 }

假如你包装绝大多数的元素,1个十分简易的方式是将它加上到你的 wrap 类中。

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

搞定!

5. 检测

建立您自身的跨访问器基本构架或仅应用Endtest。
假如你让这些物品变成1种习惯性,大约能够搞定9成的访问器难题。

原文连接:

5 Tricks to Avoid Cross Browser Issues

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。