在这里,我使用的是最新的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;
}
}
答案 0 :(得分:4)
你的表需要修复才能在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;
}
}
答案 1 :(得分:0)
删除{1}以下的float: none;
。
.table-container .col-table-cell {
display: table-cell;
vertical-align: middle;
}