javascript - 如何使 child 的 div 宽度与其内容与 parent 的 div 宽度相匹配 100% overflow-x : auto in IE & FF

Question

我有一个充满缩略图的艺术画廊。我想添加一个自定义的水平滚动条，以便用户可以滚动浏览单行缩略图。每个图库中有不同数量的缩略图。我尝试使用 CSS 属性“width:-moz-max-content;”然而，这仅适用于 Firefox，不适用于 IE6、7、8、Chrome 或 Safari。

这是一个例子-> http://theo.mypreview.co.uk/ashmolean-museum

网站的宽度设置为查看者浏览器大小的 90%。

div class="Content"- 持有者
div id="posts"- 是生成所有缩略图的地方

旁注 - 我刚刚安装了 jscroll

Answer 1

您可以使用一些浏览器特定的 CSS3 属性:

#hero {
    width: -moz-max-content; /* Firefox */
    width: intrinsic; /* Safari, Chrome */
}

有关这些属性的信息，请查看此 MDN 文档:

https://developer.mozilla.org/en/CSS/max-width

您会注意到，这些不支持 IE9/IE8/IE7，绝对不支持 IE6。但是，我认为围绕此问题的解决方案是使用 JS 计算宽度并向需要此功能的元素添加宽度。