1

我正在尝试构建一个水平滚动图像库，它具有固定的高度（例如 200 像素）和一堆图像（纵横比保持，缩小到适合 200 像素的高度）并排放置在画廊中。如果图像超过浏览器宽度，则会提供画廊的水平滚动条。

我无法让它在 Firefox 上运行。在 Firefox 中，包含图像的 div 会表现得好像它的子图像没有缩小一样，因此在图像之间留下大量空白。该库在 Chrome 和 Safari 中按预期工作。

我制作了一个 jsfiddle来尝试用尽可能少的行复制问题 - 在 Firefox 和其他浏览器中观察它。

.container {
    height: 200px; /* Want a fixed height for container. */
    white-space: nowrap; /* Want elements to display side-by-side, for horizontal scrolling. */
    overflow: auto; /* Want scrollbars on .container. */
}

.container > .element {
    display: inline-block;
    height: 100%;
}

.element > img {
    height: 100%;
}

难道我做错了什么？有没有办法让 .element 缩小以适应其缩小的图像内容？

请注意，除了图像之外，我还希望在图像上覆盖一个文本（不反映在 jsfiddle 中），这就是为什么我选择将图像包含在 .element div 中（这样我就可以给它位置：相对然后向它添加一个绝对定位的子叠加层），并选择给它一个 inline-block 的显示（这样我就可以将子叠加层对齐到 .element 的底部）。

4

1 回答 1

3

你看到https://bugzilla.mozilla.org/show_bug.cgi?id=829958

好消息是 Firefox 25 已修复此问题。坏消息是 Firefox 25 直到 10 月 28 日才发布。

作为目前的解决方法，给出.container > .element固定高度而不是百分比高度会起作用......或者或者给.container一个具有溢出样式的父级。解决该错误的关键部分是在具有可见溢出的东西上设置固定高度。

于 2013-09-17T06:33:59.503 回答