css 中引入 svg 來兼容部分安卓機顯示 0.5px 邊框

相信你們昨天打開某 404 搜索引擎的時候應該都看到這張圖片了，不得不說，後人會以這麼一種方式來記念前人，並且仍是一個偉大的公司，挺感動的。

前言

在開發 H5 頁面的時候發現，部分安卓機的原生瀏覽器不兼容 0.5px 的 border，這時候就很鬧心了，以下所示代碼：

input {
  border-bottom: 0.5px solid #DCDCDC;
}
複製代碼

使用 rem 改進

後面想到了用 rem 的方式，由於 H5 頁面借鑑了手淘的響應式像素，根據移動設備的 dpi 設定了根元素的 font-size 大小，因此幾乎全部的 px 都改爲了 rem 做爲單位，這樣能夠更好地去實現移動端的響應式像素以及 Retina 屏幕上的表現。代碼以下：

input {
  /* 47 是頁面根元素的 font-size 大小 */
  border-bottom: calc(1rem/47) solid #DCDCDC;
}
複製代碼

測試中有部分機型完美展現了，可是有部分仍是不顯示，網上有帖子說能夠利用僞元素 :before 和 :after 進行 1px 的表現，而後利用 transform: scaleY(0.5); 進行高度上的調整，思路很好，但奶奶個熊 input 元素不支持僞元素。

最後，物色到了一個很妙的方法：在 CSS 中使用 svg！

css 中引入 svg 來改進

具體思路是爲元素加上 background-image，而後把 svg 置爲圖片類型，由於 svg 上的 1px 就是實實在在的只佔 1 個物理像素。

實現很簡單，代碼以下：

input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0' y1='100%' x2='100%' y2='100%' stroke='#dcdcdc' stroke-width='1'/></svg>") ;
}
複製代碼

倒騰不止於此，利用 php 代碼把 svg 的 xml 代碼轉成 base64 格式再試試：

<?php
  echo base64_encode("<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0' y1='100%' x2='100%' y2='100%' stroke='#dcdcdc' stroke-width='1'/></svg>");
?>
複製代碼

輸出以下：

PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxsaW5lIHgxPScwJyB5MT0nMTAwJScgeDI9JzEwMCUnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9rZS13aWR0aD0nMScvPjwvc3ZnPg==
複製代碼

再引入到 css 的 background-image 中：(注意原 utf8 要改爲 base64)

input {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPjxsaW5lIHgxPScwJyB5MT0nMTAwJScgeDI9JzEwMCUnIHkyPScxMDAlJyBzdHJva2U9JyNkY2RjZGMnIHN0cm9rZS13aWR0aD0nMScvPjwvc3ZnPg==") ;
}
複製代碼

結語

其實還有不少方法能夠來解決這個問題，你們盡情發揮一下腦洞吧。

已經是年關，你們不管是外出遊玩仍是返鄉路上，都必定要眼觀四路、耳聽八方，保管本身的隨身物品。但願新的一年個人讀者們都平平安安、開開心心的，再遠再難都要回家一趟。這個冬天，不冷！

---