Css Firefox中的Div渲染错误

我的网页呈现方式和我在IE中预期的一样。当我进入Firefox时，它会在错误的位置呈现一个重要的div，从而使布局发生变化。据我所知，Firefox是错误的。如何让Firefox在正确的位置渲染div

我在三个div周围加了边框，以便更容易看到它们被渲染的位置。紫色的那个在FF中是不正确的，但在IE中是正确的

编辑

JSFiddle：

JSFIDLE在两种浏览器中呈现代码的方式相同（并且与FF相同），但IE10在实际运行页面时按照我的需要呈现代码，正如我的屏幕截图所示

我的代码：

<div style="float: left; clear: both; width: 100%;">
        <asp:Label ID="Label1" runat="server" CssClass="hdr" Text="New Grade Entry" Font-Bold="true" />
    </div>
    <div style="width: 100%; float: left; clear: both;">
        <hr />
        <br />
    </div>
    <asp:UpdatePanel ID="upnlNewGrade" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <div id="divTop" class="Option" style="width: 100%; position:relative; border-color:purple; border-style: solid;
                border-width: 1px;">
                &nbsp
                <div class="OptionLabel" style="width: 50%; height:inherit; border-color:green; border-style:solid; border-width:1px; ">
                    //details removed
                <div class="OptionSelect" style="width: 45%; min-height:10px; border-color:red; border-style: solid; border-width: 1px;">
                    //details removed
                &nbsp
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <div class="Blank" style="width:100%">
        &nbsp
    </div>
    <hr style="width: 100%;" />

 
//删除详细信息
//删除详细信息
 
 
宽度：100%；“/>

Firefox呈现：

IE渲染：

---

正如您所看到的，FF在标题文本和顶部hr上方开始div，尽管两者都应该占据整个宽度。这将导致第二个hr呈现在红色边框的面板下方（以及应该位于页面下方的标签），而不是紫色面板下方。我遗漏了什么？

您的HTML完全无效。我不知道你是否使用了一些花哨的CMS，但它一点也不正确

你不能在里面关上你的沙发

在html中使用css内联是一种不好的做法，因为人们认为它在更改它时非常糟糕

如果您想让div并排出现，它们必须获得style属性

float:left

如果要将紫色div环绕在其他div周围，它必须具有

溢出：auto

，以便与其子对象一起调整大小

InternetExplorer永远都不对，尝试使用firefox、chrome或safari进行开发。这些应该是最好的开发浏览器

这一切的结果将是：

<div style="float: left; clear: both; width: 100%;">
    <asp:Label ID="Label1" runat="server" CssClass="hdr" Text="New Grade Entry" Font-Bold="true" />
</div>
<div style="width: 100%; float: left; clear: both;">
    <hr />
    <br />
</div>
<asp:UpdatePanel ID="upnlNewGrade" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <div id="divTop" class="Option" style="width: 100%; position:relative; border-color:purple; border-style: solid;
            border-width: 1px; overflow:auto">
            &nbsp
            <div class="OptionLabel" style="width: 50%; height:inherit; border-color:green; border-style:solid; border-width:1px; float:left;">
                <p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            </div>
            <div class="OptionSelect" style="width: 45%; min-height:10px; border-color:red; border-style: solid; border-width: 1px; float:left;">
                <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>
<div class="Blank" style="width:100%">
    &nbsp
</div>
<hr style="width: 100%;" />

 
Donec ullamcorper nulla non metus拍卖商fringilla。莫里·利奥·里索斯，圣殿之门，爱神之门的前庭。Donec在eget metus为非mi porta孕妇确定了最佳身份。这是一个伟大的实践，是一个伟大的实践，是一个伟大的实践。这是一种很好的调味品，是一种很好的调味品。我不知道是谁干的，我不知道是谁干的

在奥古斯·劳里特·鲁图姆·福西布斯·多洛尔·奥克托的带领下，人马过着幸福的生活。莫里·利奥·里索斯，圣殿之门，爱神之门的前庭。这是一种很好的调味品，是一种很好的调味品。Lorem ipsum dolor sit amet，是一位杰出的献身者

 
宽度：100%；“/>

如果可以，请清除div中的float:left。 如果这不是一个选项，那么Kev回答了如何修复它

float:left;//remove it or change it into
float:none;

---

我创造了这个。看看。

您的问题称为clearfix问题。它不仅出现在FF中，也出现在webkit浏览器（safari和chrome）中。我甚至认为只有IE才能按照你的期望来处理它

只有当父div容器中的所有子容器都在其中浮动时，才会出现问题。为了更好的解释，我建议谷歌搜索“clearfix”

@Kev所述的解决方案确实有效，但它要求您在DOM中添加一个额外的元素，wich仅用于样式设置，这被认为是不好的做法。我建议使用某种类型的clearfix类。我通常与以下公司的员工一起工作：

---

你所要做的就是把它应用到你的

#divTop

容器上，你应该会没事的。关于它如何工作以及为什么工作的解释可以在这里找到：

Firefox可能不仅仅是错的。还有，你有JSFIDLE吗？请提供一个简单的例子来说明这个问题。如果没有JSFIDLE或实时站点来进行故障排除，我不能肯定，但这看起来是一个明显的问题。什么版本的IE？这可能与FF或IE无关。首先，最重要的是，总是从FF开始，然后从CB到IE，如果这些问题在FF中工作，那么这些问题在IE内部更容易修复。如果您使用包装器来包含所有内容，那么为我们添加一个示例可能是明智的。其次，如果您使用浮动，它将解释为什么FF只看到页面的一小部分。但是我不能不举个例子就给你更多。看看我的5分。我在FF、chrome、safari和opera中使用了它。他正在使用.NETWebForms，这就是为什么他有asp:Label和其他“未知”元素。是的，我在发布后看到了这个asp部分。好。。我的答案应该仍然是正确的。我在divtop中关闭了我的分区-这只是为了保持帖子的合理大小而删除的部分细节。内联css几乎就是我在故障排除过程中添加的东西。我添加了overflow:auto，这似乎很有帮助，但现在它的渲染方式偏了。然而，我认为这是我错过的一部分，所以我现在要玩它，看看我能不能让它表现出来。如果行得通，我会把你的答案标对。谢谢。我不同意你的4品脱。无需将溢出设置为自动。尽管在这种情况下它会起作用，但在其他情况下（固定高度ie），它可能会有不同的结果。我建议使用propper clearfix类。不过，请务必非常同意第5点！先生，你太棒了。非常感谢你。这解决了我的问题，没有任何额外的编码，链接非常有用。再次感谢。

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
    // Fixes Opera/contenteditable bug:
    // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
    line-height: 0;
  }
  &:after {
    clear: both;
  }
}