iphone - css 百分比宽度 <li> 不要在纵向填充 ipod/iphone 视口(viewport)

Question

http://itshappeninghere.com/mobile/explorer.php

在浏览器中拉出上面的页面将显示顶部和底部菜单的列表项(默认折叠)，填满视口(viewport)。

在 ipod touch 或 iphone 上拉出同一页面，列表项不会填满纵向视口(viewport)(右侧有一个小间隙)，但横向页面看起来很好。

有什么办法可以解决这个问题还是只是 css 渲染的一个怪癖？

这是列表项的 CSS。

ul#m_nav li {
width: 16.667%;
min-height: 10px;
float: left;
-webkit-border-radius: 0;
    border-radius: 0;
}
.mobile #filters ul li {
width: 16.667%;
min-height: 10px;
float: left;
-webkit-border-radius: 0;
    border-radius: 0;
}

Answer 1

我认为这是由于 CSS 渲染和您使用的基于百分比的宽度。 Webkit 可能会以不同于您预期的方式对其进行四舍五入 - 这些事情有时会突然出现。

您可以试试 table display properties 而不是基于百分比宽度的 float :

#filters ul {
    width: 100%;
    margin: 0;
    padding: 0;
    display:table;
}
#filters ul li {
    padding: 0;
    margin: 0;
    display: table-cell;
    height: 10px;
}

Check out this JS fiddle看看它做了什么。