前言
-
这个问题只出现在app统一mode为ios,在安卓手机上有显示问题
问题描述
-
如下图,同一个app在不同的android手机上显示的border有问题
原因
-
ionic2使用了带小数点的border-width,而带小数点的border存在浏览器兼容性问题
百度了一下带小数点的px兼容性问题
采用四舍五入解析的浏览器：IE8、IE9、Chrome,如0.55px显示为1px
采用直接取整解析的浏览器：IE7、Firefox,如0.55px显示为0px
可以显示带小数点的浏览器 : Safari,如0.55px就显示为0.55px所以我们要么统一border-width为1px要么统一为0
解决过程
-
既然是ionic使用了0.55px,那我们就找源码看哪里用了0.55px
-
直接修改源码很不科学哦,每次重新安装node_modules都要修改,每个开发人员都要修改,于是看官网有没有提供这个变量
- 那就在我们的
src/theme/variables.scss主题文件,覆盖这个属性
最后
-
原本border-width是0.55px,border-color是#c8c7cc,现在border统一为1px,增宽了,显得#c8c7cc这个颜色太深了
于是和上面解决过程一样搜索#c8c7cc,最终找到了变量$list-border-color,修改为一个浅颜色.如下图
