图像最大宽度在 Firefox 中不起作用

Question

这里，我使用的是最新的 bootstrap v3.2.0

当我在 div 块中调用 display: table-cell; CSS 时。因此，在 Firefox 中它的 div 块的内部图像将无法使用 max-width: 100%; CSS。它在其他浏览器中运行良好。

演示： http://jsfiddle.net/Q7742/2/embedded/result/

这是我的 HTML

<div class="container">
<div class="table-container">
<div class="col-table-cell col-lg-4"><img src="//farm1.staticflickr.com/22/28331349_fd0fbadbbd_z.jpg?zz=1"></div>
<div class="col-table-cell col-lg-5">B</div>
<div class="col-table-cell col-lg-3">C</div>
</div>
</div>

CSS

.col-table-cell.col-lg-5 {
    background: #ddffdd;
}
.col-table-cell.col-lg-3 {
    background: #ffffdd;
}

img {
    display: block;
    height: auto;
    max-width: 100%;    
}

@media (min-width: 1200px) {
.table-container {
        display: table;
        width: 100%;
    }

    .table-container .col-table-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
    }
}

Answer 1

您的表格需要修复才能在 Firefox 中工作：

更新小提琴：

http://jsfiddle.net/Q7742/6/embedded/result/

@media (min-width: 1200px) {
    .table-container {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    .table-container .col-table-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
    }
}

Answer 2

删除下面的float: none;。

.table-container .col-table-cell {
    display: table-cell;
    vertical-align: middle;
}