Question

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

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

小提琴：

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;元素无济于事。

任何帮助表示感谢，提前谢谢。

Answer 1

将。{1}}添加到.company-list会得到你想要的吗？见http://jsfiddle.net/35Js5/5/

Answer 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;
   }    
}

希望这有帮助

CSS：display：table;宽度：100％;不在Firefox上使用单元格内的图像

2 个答案: