問(wèn)題描述

最近做webapp開(kāi)發(fā)的時(shí)候和設(shè)計(jì)同學(xué)調(diào)ui，對(duì)方對(duì)1px比較執(zhí)著，后來(lái)參考了設(shè)計(jì)同學(xué)看到的他認(rèn)準(zhǔn)是1px的頁(yè)面，發(fā)現(xiàn)別人比我多寫(xiě)的一句就是overflow:hidden，去Google、stackOverflow搜了一番還是沒(méi)有找到答案，所以來(lái)這里請(qǐng)教各位。

以下代碼是實(shí)現(xiàn)了設(shè)計(jì)同學(xué)認(rèn)準(zhǔn)的1px的方式：

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

測(cè)試效果圖：第1條線是我之前沒(méi)加overflow:hidden的效果，第2條線是加了之后的效果，對(duì)比還是比較明顯的，明顯第2條線更細(xì)。

問(wèn)題解答

其實(shí)，加上overflow:hidden;只是取巧的做法，1像素的線在不同移動(dòng)設(shè)備上顯示的效果是不一樣的，這涉及到移動(dòng)端開(kāi)發(fā)的設(shè)備適配問(wèn)題.因?yàn)槭謾C(jī)的dpr值不一樣，dpr=1時(shí)，scal=1,1像素的線顯示就是1像素；dpr=2時(shí)，scal=0.5，1像素的線也顯示正常；dpr=3時(shí)，也一樣，建議看一下http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

這是個(gè)bug，只能這樣去解決，安卓機(jī)上面會(huì)出現(xiàn)這樣的情況，至于為什么要這么寫(xiě)，你得去問(wèn)開(kāi)發(fā)這個(gè)的人

瀏覽器bug，超過(guò)1px的就隱藏掉了

元素有默認(rèn)有行高，超出不隱藏的就會(huì)溢出

認(rèn)同@anniebaby的說(shuō)法，你可以試試把行高設(shè)置為0效果是不是一樣的。