CSS：显示：表；和宽度：100%；无法在 Firefox 上处理单元格内的图像答案

【问题标题】：CSS: display:table; and width:100%; not working with images within cell on FirefoxCSS：显示：表；和宽度：100%；无法在 Firefox 上处理单元格内的图像
【发布时间】：2014-05-20 01:57:57
【问题描述】：

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

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

小提琴：

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 中拉小提琴，您也可以在 Firefox 中看到我想要和期望的行为。

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

我也尝试添加 display:table-row; 元素，但无济于事。

任何帮助表示赞赏，在此先感谢。

【问题讨论】：

标签： html css firefox html-table

【解决方案1】：

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

【讨论】：

您先生，是救生员！ :D
啊，好一个！完全忘记了 table-layout 属性。

【解决方案2】：

尝试使用以下方式添加 moz 特定样式：

@-moz-document url-prefix() { 
// Your styling
}

这是您的代码的修复方法

小提琴：

http://jsfiddle.net/35Js5/6/

CSS 的唯一补充是：

 @-moz-document url-prefix() {
.col.col4 img {
max-height:100%;
max-width:100%;
}

.companylist .col {
    width:12.5%; 
    float:left !important;
    vertical-align:middle;
    display:inline;
   }    
}

希望对你有帮助

【讨论】：

恐怕它们不会在中间垂直对齐:(