CSS inline gallery / max-width: 100% = 滚动条不出现

Question

我正在尝试创建一个 CSS 内联库。

HTML

<div id="wrapper">
    <ul>
        <li><img src="http://placehold.it/500x50" alt="" /></li>
        <li><img src="http://placehold.it/500x50" alt="" /></li>
        <li><img src="http://placehold.it/500x50" alt="" /></li>
        <li><img src="http://placehold.it/500x50" alt="" /></li>
        <li><img src="http://placehold.it/500x50" alt="" /></li>
    </ul>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  border: 0;
  -ms-interpolation-mode: bicubic;
  width: auto\9;
  height: auto;
}

html,
body {
    width: 100%;
    height: 100%;
}

#wrapper {
    width: 100%;
    background: grey;
    text-align: center;
    overflow: scroll;
}

ul {
    display: table;
    width: 100%;
    height: 50px;
    overflow: hidden;
}

li {
    display: table-cell;
    width: 100%;
}

Fiddle

我面临的问题是它不起作用（d'oh）。想法是将#wrapper 设置为width: 100%;，然后将图像水平对齐在#wrapper 内的一行中。要在图像之间导航，可以使用水平滚动条。

但是如你所见，没有出现滚动条，溢出只是被隐藏了。
在调试时，我发现img 元素上的以下规则会导致问题：max-width: 100%;。如果您删除它，滚动条会出现，但图像不再居中。

由于它是一个响应式网站，我也不能简单地删除 max-width: 100%;。所以基本上，我被卡住了，不知道该怎么做。我什至不知道为什么max-width: 100%; 搞砸了滚动。

你能帮帮我吗？

编辑：所以在 Safari 6.0.2 中，没有出现滚动条，但在 Firefox 19.0.2 中一切似乎都很好。对我来说，事情变得越来越陌生。

Answer 1

问题不在于野生动物园，这是一个可行的解决方案：

http://jsfiddle.net/6fjV9/2/

#wrapper {
    width: 100%;
    background: grey;
    overflow: scroll;
}

ul {
    display: table;
    width: 2500px;
    height: 50px;
    table-layout: fixed;
}

li {
    display: table-cell;
    vertical-align: top;
}

img {
    display: block;
}

您将列表的宽度设置为其父级的 100%，它只占用视口大小，因为它自己的宽度也是 100%。该列表必须具有一行中所有子项的宽度，例如5 * 500 = 2500。虽然 FF 似乎只是根据其内容调整“表格”的大小（也许table-layout: fixed; 是这里的一个重要样式属性），但 safari 将其大小保持为 100%，不会导致滚动条，因为它与其父级一样宽。

更新：或者根本不使用 display: table 设置宽度。 http://jsfiddle.net/6fjV9/4/