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

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

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

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

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

图片描述

回答：

其实，加上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

回答：

这是个bug，只能这样去解决，安卓机上面会出现这样的情况，至于为什么要这么写，你得去问开发这个的人

回答：

浏览器bug，超过1px的就隐藏掉了

回答：

元素有默认有行高，超出不隐藏的就会溢出

回答：

认同@anniebaby的说法，你可以试试把行高设置为0效果是不是一样的。

以上是 【CSS】手机网页中用css写1px的描边，为什么需要加一句overflow:hidden才能真正显示1px？ 的全部内容， 来源链接： utcz.com/a/156051.html

回到顶部