移动端浏览器兼容笔记

2017-01-08 本文已影响0人老虎爱吃母鸡

PC浏览器的button有默认背景颜色
在iphone6, iphone5手机上测试的时候发现, 一个button的看不见, 但是PC浏览器上可以看见, 然后发现是因为chrome浏览器上对button有默认的样式, 所以就算没有background-color, button也是有颜色的

Paste_Image.png

默认的样式就是这样子

Paste_Image.png
input的内阴影
在iphone5手机上发现input框都有只要不是border:none; 都有一个内阴影, 然后发现是-webkit-appearance这个属性, 只有设置为none就可以去掉内阴影, 这个方法也常用来去掉IOS的默认样式
如何调试iPhone上的样式问题
这个方法严格来说不是直接调试, 而是借助Safari来调试, 因为一般我们是使用Chrome来开发, 很多IOS上会出现的问题在Chrome上没有, 但是在手机上Debug又不容易, 但是其实可以使用Safari打开, 一般iPhone上同样的问题在Safari开发者模式中可以模拟出来, 然后就可以使用开发者工具来调试了