search

Home  >  Q&A  >  body text

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

最近做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条线更细。

黄舟黄舟2778 days ago642

reply all(5)I'll reply

  • PHP中文网

    PHP中文网2017-04-17 11:41:53

    Actually, adding overflow:hidden; is just a trick. The display effect of a 1-pixel line on different mobile devices is different. This involves the device adaptation problem of mobile terminal development. Because of the DPR value of the mobile phone It’s different. When dpr=1, scal=1, the line display of 1 pixel is 1 pixel; when dpr=2, scal=0.5, the line of 1 pixel is also displayed normally; when dpr=3, the same is true. It is recommended to take a look at http ://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

    reply
    0
  • 阿神

    阿神2017-04-17 11:41:53

    This is a bug and can only be solved in this way. This will happen on Android phones. As for why it is written like this, you have to ask the person who developed it

    reply
    0
  • ringa_lee

    ringa_lee2017-04-17 11:41:53

    Browser bug, anything larger than 1px will be hidden

    reply
    0
  • PHP中文网

    PHP中文网2017-04-17 11:41:53

    Elements have a default line height. If it exceeds the line height and is not hidden, it will overflow

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-17 11:41:53

    I agree with @anniebaby, you can try setting the row height to 0 to see if the effect is the same.

    reply
    0
  • Cancelreply