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

【问题标题】：css percentage width <li> do not fill ipod/iphone viewport in portraitcss 百分比宽度 <li> 不以纵向填充 ipod/iphone 视口
【发布时间】：2013-12-24 03:42:46
【问题描述】：

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;
}

【问题讨论】：

标签： iphone responsive-design ipod-touch css

【解决方案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 看看它的作用。

【讨论】：