html - CSS:显示:表格；和宽度:100%；无法在 Firefox 的单元格中处理图像

Question

我的设计需要响应式宽度，并且我有一些图像并排排列而不需要垂直对齐，所以我做了整个 display:table;, display :table-cell; 东西。

不幸的是，在 Firefox 中，图像不会在浏览器缩放时缩放。

fiddle :

http://jsfiddle.net/35Js5/

HTML:

<main>
    <article class="companylist relative SectionStyle1">
        <section class="col col4">
            <img src="http://upload.wikimedia.org/wikipedia/en/9/99/MarioSMBW.png" alt="Mario" />
        </section>
        <section class="col col4">
            <img src="http://upload.wikimedia.org/wikipedia/en/f/f1/LuigiNSMBW.png" alt="Luigi" />
        </section>
        <section class="col col4">
            <img src="http://upload.wikimedia.org/wikipedia/en/f/f5/Toad_3D_Land.jpg" alt="Toad" />
        </section>
        <section class="col col4">
            <img src="http://upload.wikimedia.org/wikipedia/en/thumb/d/d5/Peach_%28Super_Mario_3D_World%29.png/200px-Peach_%28Super_Mario_3D_World%29.png" alt="Peach" />
        </section>
    </article>
</main>

CSS:

@import url(http://fonts.googleapis.com/css?family=Fjord+One|Imprima|Reenie+Beanie);
body {
    background: #fff;
    font-size: 62.5%;
    font-family:"Imprima", "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    padding: 0px;
    color: #000;
    width:100%;
    text-align:center;
    margin:0;
}
p, ul, ol {
    margin: 1em 0;
    line-height: 1.2em;
    font-size:1.2em
}
li {
    list-style-position:inside;
}
.col { 
    box-sizing:border-box;
    display:inline-block;
    float:left;
    padding:10px 10px; 
}
.col1 {
    width:100%;
}
.col2 {
    width:50%;  
}
.col4 {
    width:25%;    
}
.col8 {
    width:12.5%;   
}
header, footer, main > article {
    padding: 10px 10%;
    width:80%;
    float:left;
    clear:left;
}
.SectionStyle1 {
    background-color:WhiteSmoke;
    color:Black;
}
.companylist {
    display:table;
}
.companylist .col {
    display:table-cell;
    height:200px;
    vertical-align:middle;
    float:none;
}
.companylist .col img {
    max-height:100%;
    max-width:100%;
}

如果您在 Chrome 中打开 fiddle ，您也可以在 Firefox 中看到我想要和期望的行为。

如果我打开 float:left;，单元格会缩小，但垂直对齐会丢失 :(

我还尝试添加一个 display:table-row; 元素，但没有成功。

感谢任何帮助，提前致谢。

Answer 1

将 table-layout:fixed 添加到 .company-list 是否能得到您想要的？参见 http://jsfiddle.net/35Js5/5/