如何解决Firefox渲染Bootstrap Thumbnail的方式与谷歌Chrome不同？

Question

为什么最新的Firefox浏览器渲染Bootstrap缩略图的方式与Google Chrome不同？我坚持让所有缩略图都相等，但无法弄清楚如何。

将max-width属性设置为none可以修复高度，但让图像溢出其父容器。你能告诉我为什么以及如何解决这个问题，以便它出现在谷歌浏览器中出现的所有浏览器中？

Here is my fiddle

编辑添加了屏幕截图（右键单击 - ＆gt;＆＃39;在新标签页中打开＆＃39;查看完整尺寸）

Chrome：max-width = 100％（默认） - 非常适合 Chrome：max-width = none - 溢出的父级 Firefox：max-width = 100％（默认值） - 由BS缩小 Firefox：max-width = none - 溢出的父级

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中查看，或运行以下代码段：

.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>