项目中遇到的苹果safari不兼容的问题太多了.在这里整理一下.希望能帮助到在走弯路的人.
1. 日期格式问题. 这个问题应该是遇到最多的.也是最多被熟知的.safari不识别-08-08的日期格式.会显示NaN.
解决方式: 在处理日期之前转换为/08/08的格式.
2. 设置了input背景颜色在safari颜色异常显示的问题. 这是由于safari对于input有默认的渲染背景颜色.必须把input原生颜色清除.否则会造成颜色显示特别不纯正.
解决方式: 所有的input加上-webkit-appearance: none;属性.
3. safari不兼容select居中属性text-align-last.
解决方式:
如果内容宽度固定: 这个如果你的select内的内容的宽度是固定的还好办.直接用空格或者padding就能解决.
内容宽度不固定: 比如你的select内可能显示1-100 也可能显示1000-2000 这个有点儿难办.因为你无法设置select的min-width. 我看了其他博客的建议解决方式.诸如虚拟一个span等方式.都无效. 我用的解决方式是js动态控制select的padding; if判断哪个内容对应哪个padding;解决了safari不居中的问题.
4. 苹果全面屏手机阻止浏览器事件. 比如我们在一个阅读页面需要实现点击出现header , 再点击隐藏. 这个在安卓手机上没问题.但是在苹果浏览器内,如果我们点击,此时苹果会优先弹出苹果系统的底部菜单.再点击一下,才出现我们的header.
解决方式: 暂时无解.
