border-width,而帶小數(shù)點(diǎn)不兼容問題

前言
這個(gè)問題只出現(xiàn)在app統(tǒng)一mode為ios,在安卓手機(jī)上有顯示問題

問題描述
如下圖,同一個(gè)app在不同的android手機(jī)上顯示的border有問題!

原因
ionic2使用了帶小數(shù)點(diǎn)的border-width,而帶小數(shù)點(diǎn)的border存在瀏覽器兼容性問題

百度了一下帶小數(shù)點(diǎn)的px兼容性問題采用四舍五入解析的瀏覽器：IE8、IE9、Chrome,如0.55px顯示為1px采用直接取整解析的瀏覽器：IE7、Firefox,如0.55px顯示為0px可以顯示帶小數(shù)點(diǎn)的瀏覽器 : Safari,如0.55px就顯示為0.55px

所以我們要么統(tǒng)一border-width為1px要么統(tǒng)一為0

解決過程

既然是ionic使用了0.55px,那我們就找源碼看哪里用了0.55px

直接修改源碼很不科學(xué)哦,每次重新安裝node_modules都要修改,每個(gè)開發(fā)人員都要修改,于是看官網(wǎng)有沒有提供這個(gè)變量

那就在我們的src/theme/variables.scss

主題文件,覆蓋這個(gè)屬性

最后

原本border-width是0.55px,border-color是#c8c7cc,現(xiàn)在border統(tǒng)一為1px,增寬了,顯得#c8c7cc這個(gè)顏色太深了于是和上面解決過程一樣搜索#c8c7cc,最終找到了變量$list-border-color,修改為一個(gè)淺顏色.如下圖

** ionic2常見問題

作者：小軍617鏈接：http://www.itdecent.cn/p/b45ba73d3f73來源：簡(jiǎn)書著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容