淘宝支持 css3圆角和阴影属性吗

html-css017

淘宝支持 css3圆角和阴影属性吗,第1张

支持不支持或者是否兼容圆角、阴影是看浏览器版本，而非看是哪个网站，css制作圆角、阴影的技术已经得到了大多数主流浏览器的支持，包括Safari，谷歌浏览器，IE，Opera和火狐浏览器，但是也有部分IE版本就蛋疼的要死，很多样式都不兼容，比如IE6、IE7、IE8这几个版本，那么我们就得用一些方法来解决兼容问题，比如在样式前面加兼容前缀，如：

-moz-border-radius: 15px

-webkit-border-radius: 15px

-o-border-radius: 15px

border-radius: 15px

从WP7开始，淘宝触屏版的页面就不兼容自带的IE，即使是到了WP

8.1

这个问题仍然没有解决，一起来看看背后的这秘密。一开始触屏版就是为webkit核心浏览器设计的，换句话说就是为Android和iOS而设计的。问题是从CSS文件可以看出，所有的CSS3属性都被加上了-webkit标记，也就是说，所有的CSS3样式只对webkit核心的浏览器起效。所以说并不是WP或IE的问题，在Android和iOS上如果使用Firefox或旧内核的Opera浏览器都是不能正常访问的。经过两次批量替换，在本地服务器上部署访问就完全正常了，从下载页面到修正部署花费时间不到3分钟，可见修正的成本是十分低廉的，就看淘宝是否愿意做了。为什么淘宝要这样做呢？下面是臆想：淘宝在开发触屏版页面时，市面上90%以上的智能手机都是Android和iOS，很巧的是两者的默认浏览器内核都是webkit，于是开发人员们随便聊了聊，一拍脑袋“干脆就完全为webkit核心开发吧~不用考虑兼容性还可以节省零点几KB的流量，其它手机（塞班？MTK？）就让它们用老的去吧~~”项目经理只知道有苹果和安卓，不知道什么是webkit，于是拿着手上的iPhone滑了滑旧版页面，假装思考了一下，然后同意了，程序员们心理暗爽：“嘿嘿嘿可以多睡几天觉了~”没有一个人想到手机上居然还有Firefox，更别提还有个使用IE的windows

phone系统，除了一个刚入职的小伙子，坐在角落默默地把玩着手上的Omnia

7，不敢多做声。不过既然淘宝说5月开始就要停用旧版页面，到时候应该会对触屏版做一些优化，还是期待一下万能的淘宝吧！

rem：移动端布局，根据根节点字体大小，具体可参考淘宝移动端解决法案，根据设备dpr；

em：类似rem，不过是根据父节点字体大小

vw,vh ：viewport height和viewport width。1vw就是viewport width的1%。