如何解决 Firefox 呈现 Bootstrap Thumbnail 与 Google Chrome 不同的问题？

Question

为什么最新的 Firefox 浏览器呈现 Bootstrap 缩略图的方式与 Google Chrome 不同？我坚持让所有缩略图的高度相等，但不知道怎么做。

将max-width 属性设置为none 会修复高度，但会让图像溢出其父容器。你能告诉我为什么以及如何修复它以使其在所有浏览器中都像在 Google Chrome 中一样出现吗？

Here is my fiddle.

编辑：添加了屏幕截图（右键单击 ->“在新标签页中打开”以查看完整尺寸）

Chrome：最大宽度 = 100%（默认）- 非常适合 Chrome：最大宽度 = 无 - 溢出父级 Firefox：最大宽度 = 100%（默认）- 由 BS 缩小 Firefox：最大宽度 = 无 - 溢出父级

Answer 1

如果您的图像高度固定为 240 像素，那么其中一种解决方案是将它们包装在绝对定位跨度中并使用此 css：

.thumbnails {
    margin: 0 0 10px 0;
    padding: 0;
}
.thumbnail {
    position: relative;
    height: 250px;
}
.thumbnail span {
    margin: 0 auto;
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    overflow: hidden;
}
.thumbnail span img {
    margin: 0 auto;
    display: block;
}

在this Fiddle中查看，或者运行下面的sn-p：

.thumbnails {
    margin: 0 0 10px 0;
    padding: 0;
}
.thumbnail {
    position: relative;
    height: 250px;
}
.thumbnail span {
    margin: 0 auto;
    display: block;
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    overflow: hidden;
}
.thumbnail span img {
    margin: 0 auto;
    display: block;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-body">
                <div id="slideshow">
                    <div>
                        <div>
                            <div data-index="1">
                                <ul class="thumbnails list-unstyled">
                                    <li class="slide col-xs-4">
                                        <a href="#" class="thumbnail" title="This is ok">
											<span>
												<img src="http://i.imgur.com/DONm5Ih.jpg" class="shot landscape" width="auto" height="auto" alt="image" />
											</span>
                                        </a>
                                    </li>
                                    <li class="slide col-xs-4">
                                        <a href="#" class="thumbnail" title="This is ok">
                                            <span>
												<img src="http://i.imgur.com/TFEAQTJ.jpg" class="shot portrait" width="auto" height="auto" alt="image" />
											</span>
                                        </a>
                                    </li>
                                    <li class="slide col-xs-4">
                                        <a href="#" class="thumbnail" title="This is ok">
                                            <span>
												<img src="http://i.imgur.com/WZbs0wI.jpg" class="shot landscape" width="auto" height="auto" alt="image" />
											</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>