Question

我在使用Firefox 21，OS X（10.8 Mountain Lion）以表格单元模式显示DIV的DIV容器时遇到问题。

在Chrome / Safari上完美运行。

您可以在此处查看我的网页：http://staging-new-hp.videonot.es 寻找#works-with div及其子代。

感谢您的帮助！

Answer 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元素。

Answer 2

在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>

显示问题：Firefox上的table-cell（21，OSX）

2 个答案: