前言

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