美文网首页
border-width,而带小数点不兼容问题

border-width,而带小数点不兼容问题

作者: 笨coco | 来源:发表于2018-04-18 15:55 被阅读72次

前言
这个问题只出现在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,修改为一个浅颜色.如下图

** ionic2常见问题

作者:小军617链接:http://www.jianshu.com/p/b45ba73d3f73來源:简书著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关文章

网友评论

      本文标题:border-width,而带小数点不兼容问题

      本文链接:https://www.haomeiwen.com/subject/ibgcsxtx.html