Question

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

在浏览器中上拉页面将显示顶部和底部菜单的列表项（默认情况下已折叠），填充视口。

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

有没有解决这个问题，还是只是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：

，而不是基于百分比宽度的浮点数

#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了解它的作用。

css百分比宽度<li>不以纵向填充ipod / iphone视口</li>

1 个答案: