html - 显示问题：Firefox 上的表格单元格（21，OSX）

Question

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

它在 Chrome / Safari 上完美运行。

您实际上可以在这里查看我的网页：http: //staging-new-hp.videonot.es 查找#works-withdiv 及其子项。

谢谢你的帮助！

Answer 1

尝试给祖先正确的display属性

#works-with {
    display: table;
}

#works-with .logos {
    display: table-row;
}

#works-with .logos .platform {
    display: table-cell;
}

display: table-cell旨在模仿 HTML 表格单元格。如果没有正确的表格结构，您不会将 a 随机放置<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>