[分享]css3微信兼容问题

CSS3作为一门现代化的Web开发技术，已经得到越来越多的应用，但是在微信中，还存在一些CSS3的兼容性问题。以下是几个解决方法：boxsizing: borderbox; webkitboxsizi...

CSS3作为一门现代化的Web开发技术，已经得到越来越多的应用，但是在微信中，还存在一些CSS3的兼容性问题。以下是几个解决方法：

box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box; 

box-sizing属性定义了盒模型的计算方式，border-box表示盒模型为border、padding、content，即包括边框和内边距的大小都会计入元素的宽度。由于微信中的内核不同，在使用box-sizing属性时需要加上浏览器前缀。

-webkit-overflow-scrolling: touch; 

在iOS设备上，滚动的效果非常重要。通过使用-webkit-overflow-scrolling:touch将元素的滚动效果变得更加流畅。但是在Android设备上，无法使用这个属性，因此需要做出相应的兼容性处理。

-webkit-backface-visibility: hidden; 

在微信中使用3D过渡时，需要加上-webkit-backface-visibility: hidden保证过渡更加流畅。但也需要注意到，在一些安卓设备中，这个属性会导致渲染失败，因此需要进行特别处理。