Firefox 不垂直扩展 div答案

【问题标题】：Firefox does not expand div verticallyFirefox 不垂直扩展 div
【发布时间】：2015-09-14 05:04:34
【问题描述】：

我已经实现了一个表格，表格内部包含背景图像。图像在 Safari、Chrome 和 Opera 中显示正确。但只是 Firefox 不会在表格单元格中显示任何内容。

我发现由于我不知道 Firefox 不会使用固定尺寸扩展我的 div 的原因：

height: 100px; width: 100px;

我发现Firefox在我使用时正确显示宽度

height: 50px; width: -moz-available;

但高度仍然不起作用，我找不到任何解决我的问题的方法......

这是我的 HTML 代码：

<div class="section" id="section1">

        <table class="tableReferences">
            <tr class="row1">
                <td>
                    <table class="tableRow1">
                        <tr>
                            <td class="cell1">
                                <div class="referencesPic" style="height: 50px; width: -moz-available; background-image:url(../img/officePic.jpg);background-size: cover; background-position:center center;"></div>
                            </td>
                            <td class="cell2">

                               <div class="container">
                                <div class="demo num1">

                                <table class="hoverContent">

                                        <tr>
                                            <td class="hoverContent">
                                                Backgroundtext
                                            </td>
                                        </tr>

                                    </table>

                                </div>

                                <div class="effects clearfix num2 effect-1">
                                <div class="img invisibleAnimationContainer"> 
                                <img src="../img/background.png" alt="" >
                                    <div class="overlay expand"> 

                                    <table class="hoverContent">

                                        <tr>
                                            <td class="hoverContent">
                                                hallo meine Freunde
                                            </td>
                                        </tr>

                                    </table>

                                    </div>
                                </div>
                                </div>
                            </div>

                            </td>
                            <td class="cell3">

                            <div class="container">
                                <div class="demo num1" style="height: 50px; width: -moz-available; background-image:url(../img/referencesPic.jpg);background-size: cover; background-position:center center;"></div>

                                <div class="effects clearfix num2 effect-1">
                                <div class="img invisibleAnimationContainer"> 
                                <img src="../img/background.png" alt="" >
                                    <div class="overlay expand"> 

                                    <table class="hoverContent">

                                        <tr>
                                            <td class="hoverContent">
                                                Foregroundtext
                                            </td>
                                        </tr>

                                    </table>

                                    </div>
                                </div>
                                </div>
                            </div>


                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

        </table>

      </div>


      </div>
    </div>

</body>
</html>

我使用的 CSS 文件只是实现了表格的每个部分扩展到其父容器。

肯定会导致我的问题的重要 CSS 部分直接在 HTML 文件中实现。我还将 HTML 代码缩短为一行。

这是网站在 Chrome 中的正确显示方式：

该网站在 Firefox 中显示完全错误：

在 Firefox 中使用

 height: 50px; width: -moz-available;

好的，现在我尝试将 div 放在一起。我现在的问题是，我无法将 div 水平放置在一行中。我尝试了很多我在互联网上找到的例子。

我不知道为什么行中的 div 不水平放置...

我的桌子：

<div class="referencesContainer">
            <div class="row row1">
                <div id="left">Left Side Menu</div>
                <div id="middle">Random Content</div>
                <div id="right">Right Side Menu</div>
            </div>

            <div class="row row2">
            </div>

            <div class="row row3">
            </div>
        </div>

见fiddle

【问题讨论】：

我已经更新了我的问题。见上文
请添加 JavaScript 和 CSS 文件的完整链接。本地引用对我们毫无用处。除此之外，还有很多代码供我们浏览。请尽量减少这种情况，并尝试在问题中创建一个工作片段或链接到 JSFiddle。
我再次更新了我的问题。 JSFiddle 无济于事，因为我的问题只能在 Firefox 中重新创建。
规则一；我还用桌子吗？是的？删除表格，然后重试。表格用于表格数据。不为别的。绝对不能包含背景图片。
JSFiddle 在 FireFox 中工作。我没有看到问题。如果您在 FireFox 中发布了演示问题的 JSFiddle，我们可以使用 FireFox 打开 JSFiddle 并亲自查看。与 Stack Snippets 相同（可以在问题中嵌入的可运行代码）。

标签： html css firefox

【解决方案1】：

您是否尝试过使用 display:flex;和 flex-wrap: 换行；在您的 .row（在 CSS 中）上，然后将您的左、右和内部 div 设置为 % 宽度，以便它们总共构成 100%？

【讨论】：