css3 - 手机网页中用css写1px的描边，为什么需要加一句overflow:hidden才能真正显示1px？

Question

最近做webapp开发的时候和设计同学调ui，对方对1px比较执着，后来参考了设计同学看到的他认准是1px的页面，发现别人比我多写的一句就是overflow:hidden，去Google、stackOverflow搜了一番还是没有找到答案，所以来这里请教各位。

以下代码是实现了设计同学认准的1px的方式：

p{
  height: 1px;
  width:100px;
  background: black;
  overflow: hidden;
  transform: scaleY(0.5);
  -webkit-transform: scaleY(0.5);
}

测试效果图：
第1条线是我之前没加overflow:hidden的效果，第2条线是加了之后的效果，对比还是比较明显的，明显第2条线更细。

Answer 1

其實，加上overflow:hidden;只是取巧的做法，1像素的線在不同移動設備上顯示的效果是不一樣的，這涉及到移動端開發的設備適配問題.因為手機的dpr值不一樣，dpr=1時，scal=1,1像素的線顯示就是1像素；dpr=2時，scal=0.5，1像素的線也顯示正常；dpr=3時，也一樣，建議看一下http ://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

Answer 2

這是個bug，只能這樣去解決，安卓機上面會出現這樣的狀況，至於為什麼要這麼寫，你得去問開發這個的人

Answer 3

瀏覽器bug，超過1px的就隱藏掉了

Answer 4

元素有預設有行高，超出不隱藏的就會溢出

Answer 5

認同@anniebaby的說法，可以試試看把行高設定為0效果是不是一樣的。