Html CSS内联库/最大宽度：100%=不显示滚动条

我正在尝试创建一个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>

我面临的问题是它不起作用。其想法是将

#wrapper

设置为

宽度：100%

然后让图像在

#wrapper

内水平对齐一行。要在图像之间导航，可以使用水平滚动条

但正如您所见，没有滚动条出现，溢出只是隐藏起来。
调试时，我发现

img

元素上的以下规则导致了问题：

max width:100%。如果删除该选项，将显示滚动条，但图像不再居中

由于它是一个响应迅速的站点，我也不能简单地删除
max-width:100%。所以基本上，我被困住了，不知道该怎么办。我甚至不知道为什么
最大宽度：100%将滚动弄得一团糟

你能帮帮我吗

编辑：所以在Safari 6.0.2中，没有滚动条出现，但在Firefox 19.0.2中，一切看起来都很好。对我来说，事情变得越来越陌生。
问题不在于狩猎，比如说，这里有一个可行的解决方案：


您可以将列表的宽度设置为其父对象的100%，这只需要视口大小，因为其自身的宽度也是100%。列表的所有子项的宽度必须在一行中，例如
5*500=2500
。虽然FF似乎只是根据其内容调整“表”的大小（可能
表布局：固定；
在这里是一个重要的样式属性），但safari将其大小保持在100%，不会产生滚动条，因为它与其父级一样宽

更新：或者使用display:table完全不设置宽度
 我看到了水平滚动条：|@AndreaLigios谢谢你的评论。我刚刚检查了Firefox 19.0.2中的小提琴，事实上，那里一切都很好，但Safari 6.0.2中没有。我认为问题只存在于Safari中。Chrome&FF适用于我。在Safari中，我看到滚动条被禁用，因为它只显示一个图像。由于这是Safari的问题，您可能需要查看。啊，我看到了，谢谢！因此，另一个注意事项是，如果其他人遇到这个问题：不一定带来任何好处！“不要使用宽度为20000像素的包装器”我认为这是错误的，因为上面的提琴清楚地表明需要这样的包装器宽度。老实说，我根本没有尝试设置任何宽度，但它应该可以工作，试试看；）。
* {
  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%;
}

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