我在使用Firefox 21,OS X(10.8 Mountain Lion)以表格单元模式显示DIV的DIV容器时遇到问题。
在Chrome / Safari上完美运行。
您可以在此处查看我的网页:http://staging-new-hp.videonot.es
寻找#works-with
div及其子代。
感谢您的帮助!
答案 0 :(得分:1)
尝试为祖先提供正确的display
属性
#works-with {
display: table;
}
#works-with .logos {
display: table-row;
}
#works-with .logos .platform {
display: table-cell;
}
display: table-cell
旨在模仿HTML表格单元格。如果没有正确的表格结构,您不会在内容中间随机放置<td></td>
。如果没有正确的结构,也不应放置display:table-cell
元素。
答案 1 :(得分:0)
在3rror404的回答之后解决了这个问题,并在每个容器和width:100%
上添加了table-layout:fixed
之类的内容。适用于Webkit(Chrome,Safari)和Firefox。
这是完整的CSS(SCSS语法):
#works-with {
width: 100%;
.container-box {
width: 100%;
display: table;
table-layout: fixed;
.platforms {
width: 100%;
display: table-row;
.platform {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 17%;
margin-right: 15px;
margin-bottom: 15px;
}
}
}
和相应的HTML:
<section id="works-with">
<h2>Works with</h2>
<div class="container-box">
<div class="platforms">
<div class="platform">
<img .../>
</div>
<div class="platform">
<img .../>
</div>
<div class="platform">
<img ./>
</div>
<div class="platform">
<img .../>
</div>
<div class="platform">
<img .../>
</div>
<div class="platform">
<img .../>
</div>
</div>
</div>
</section>