Question

我不太确定如何将标题称为一个相当模糊的问题。

基本上，如果你去http://www.discovertheplanet.net点击3个方框中的一个，如果你在Firefox上，你会看到问题。如果您在IE或Chrome上查看，左侧的菜单位于正确的位置，但在Firefox上它会从页面开始。

我查看了控制台，并且有一些CSS错误引用了bootstrap.css。我一直在Bootstrap网站上查找firefox的已知问题，但没有任何相关内容。

我的主要HTML是菜单所在的位置：

<!-- Main Body Area -->

<div class="main-container-notes">
    <div id="left-box">
        <?php 

        echo "<div style='width: 100%; display: table;'>";

        while( $noteName = sqlsrv_fetch_array( $resultNotes, SQLSRV_FETCH_ASSOC)) 
        {
            echo "<div class='hvr-bounce-to-right1 hover-cursor' style='width: 100%; border-right: 5px solid #00AA88; height: 50px;'>" . $noteName['NoteName'] . "</div>";
        }

        echo "</div>";
        ?>
    </div>
    <div id="right-box">

    </div>
</div>

<!-- End Main Body Area -->

我刚刚在这里包含了我的整个CSS文件，所以你可以看到所有的课程

Animations有一个，General Styles有一个

就像我说它相当模糊，我不确定你需要什么额外信息，

请问我，我可以为你提供。

所以我问，为什么这只发生在Firefox？

Answer 1

.main-container-notes高度导致此问题尝试删除它

Answer 2

尝试添加此代码：

#left-box {
vertical-align: top;
}

在我的Firefox中，它解决了你的问题=）这个解决方案允许你保持.main-container-notes 1000px的高度或任何你想要的

Firefox错误地显示<div> - HTML / CSS

2 个答案: