上周在做东家内部点餐系统,页面开发完成时发现,在装有QQ浏览器的手机上查看效果发现页面错乱了。当时想找原因,因为是妹子的手机又将近下班就担阁了。今天上班第一件事就是找到这BUG,查找官方相关资料发现,我用了CSS3属性 transform 。
css code
.transform{-webkit-transform: translate(2.5rem, 0px);-moz-transform: translate(2.5rem, 0px);-ms-transform: translate(2.5rem, 0px);transform: translate(2.5rem, 0px);} .transition{-webkit-transition: transform 0.3s ease-in-out 0s, width 0.3s ease-in-out 0s; -moz-transition: transform 0.3s ease-in-out 0s, width 0.3s ease-in-out 0s; -ms-transition: transform 0.3s ease-in-out 0s, width 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s, width 0.3s ease-in-out 0s;}
而且当时急于开发看效果,没有添加私有标识 -webkit -moz -ms -o 等。
问题出现在这,各浏览器的内核并不都是标准的,所以开发时要有习惯加上私有标识,一次性兼容目前主流浏览器,免的事后查找原因。
transform 属性相关
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。
Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。
Opera 支持替代的 -o-transform(只支持 2D 转换)。
转载请注明:TUTERM.COM » QQ浏览器中页面出现莫名错乱原因分析