Site Loader

LOCATION

VanY_Y
场景:在开发微商城的时候,经常会遇到ios端和安卓端的样式显示不一样,例如同一按钮(样式一样)会显示不一样的颜色,导致项目整体的搭配不是很好.在网上搜索了一番后,发现css样式:webkitappearance: none,就可以去除浏览器默认样式.
ul, li, dl, dt, dd, form, h1, h2, h3, h4, p, input, form {
margin: 0px;
padding: 0px;
-webkit-appearance: none;
}
问题:
    但是后来发现一个问题,微商城的input的checkbox和radio类型在安卓端无法正常显示,但在ios端和pc端可以正常,通过排查发现,原来是在全局css定义样式之后(如上样式)所产生的问题
 
解决方案:
        为input对应的类型对  webkitappearance 进行取值,例如:
input[type=checkbox]{
-webkit-appearance: checkbox;
}
-webkit-appearance属性拓展(以下信息从网上摘取):
 
①说明:  
       -webkit-appearance 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。此属性非标准且渲染效果在不同浏览器下不同,有些属性值甚至不支持,请慎用。
 
②前缀说明
       webkit是一种浏览器私有前缀,是浏览器对新css实现的一个提前支持-webkit-前缀是指webkit内核的浏览器,与之相同的还有一个浏览器私有前缀-moz-,-moz-是指Firefox内核的浏览器
 
③浏览器私有属性说明
      为什么要有私有前缀呢?因为制定HTML和CSS标准的组织W3C动作是很慢的。通常,有w3c组织成员提出一个新属性,比如说圆角border-radius,大家都觉得好,但是w3c不会为这个属性制定标准,而是要走很复杂的程序,经过很多审查。而浏览器商不愿意等那么久,他们觉得一个属性已经够成熟了,就会在浏览器中加入支持。但是避免日后w3c公布标准时有所变更,就会加入一个私有前缀,比如-webkit-border-radius,通过这种方式来提前支持新属性,等到日后w3c公布了标准,border-radius的标准写法确立之后,再让新版的浏览器支持border-radius这种写法。

Post Author: Vany

我是一个喜欢追求技术的小伙,在大学开始之前,自己还是一个电脑白痴,对于电脑,只会开关机,但是由于自己的兴趣,我在选专业的时候,全部选择了计算机专业,其实我也不知道为什么这样不顾家人的反对去做这个决定。上了大学后,我在大一的时候开始接触计算机硬件,设计的领域包括了电脑维修,系统封装等等。在大二的时候,我才开始接触PHP,一开始的时候还不是很懂,也没什么资源,所以学习只能靠老师讲一些特别基础的东西。在大二的一段时间,自己对服务器特别感兴趣,但是资源问题,只能自己慢慢研究,后来通过各种百度,通过翻墙获得了自己的第一个域名,.top域名。后来还弄了一个免费的虚拟空间,在结合域名,我自己弄了一个静态的个人网站。大三的时候,我在网上找到兄弟连这个网站,网站上面有一些免费的视频,特别适合新人看。从那以后,我一直在看教学视频去提高自己的能力,在后来,经过面试八连碰壁,才发现自己之前学的是那么肤浅,而且工作也没有自己想象的那么简单,但是高兴的是,目前工作的那家公司录用了我,在这个公司我真的学会了很多东西,包括一些cms网站的建设啊,微商城开发啊,还有最让自己兴奋的就是微信接口的开发等等这些。即使学了不少东西,但有些时候还是会觉得自己还是个小白,所以我必须不断的提升自己

发表评论

电子邮件地址不会被公开。