Firefox 中的 div 渲染不正确答案

【问题标题】：Div rendering incorrectly in FirefoxFirefox 中的 div 渲染不正确
【发布时间】：2013-04-04 05:18:51
【问题描述】：

我的网页在 IE 中按预期呈现。当我进入 Firefox 时，它会在错误的位置呈现一个重要的 div，从而破坏布局。据我所知，Firefox 是错误的。如何让 Firefox 在正确的位置呈现 div？

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

编辑

JSFiddle 在两个浏览器中以相同的方式呈现代码（并且以与 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%;" />

Firefox 渲染：

IE 渲染：

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

【问题讨论】：

Firefox 可能不仅仅是错误的。你有 jsfiddle 吗？
请提供一个简化的jsFiddle 显示问题
不能肯定地说没有 JSFiddle 或 Live 站点来进行故障排除，但这看起来是一个明显的问题。什么版本的 IE？
这可能与FF或IE无关。首先也是最重要的总是从 FF 开始，然后 CB 到 IE，如果这些问题在 FF 中工作，这些问题在 IE 内部更容易解决。另外，您是否使用包装器来包含所有内容，添加一个示例供我们使用可能是明智的。其次，如果您使用浮动，它将解释为什么 FF 只看到一小部分页面。但是我不能再给你一个例子了。
看看我的5分吧。我让它在 FF、chrome、safari 和 opera 中工作。

标签： css firefox html

【解决方案1】：

您的问题称为 clearfix 问题。它不仅出现在 FF 中，而且出现在 webkit 浏览器（safari 和 chrome）中。我什至认为只有 IE 会按照您的预期处理它。

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

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

.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;
  }
}

您所要做的就是将它应用到您的 #divTop 容器中，您应该没问题。可以在此处找到有关其工作方式和原因的说明：http://nicolasgallagher.com/micro-clearfix-hack/

【讨论】：

你，先生，真棒。非常感谢。这在没有任何额外编码的情况下解决了我的问题，并且链接非常有用。再次感谢。

【解决方案2】：

您的 HTML 完全无效。我不知道您是否使用了一些花哨的 CMS，但它根本不对。

不要在#divtop 中关闭 div
在 html 中使用 css inline 是一种不好的做法，因为它应该很难改变它。
如果你想让你的 div 并排，他们必须得到样式属性float:left
如果您想将紫色 div 包裹在其他 div 周围，它必须有 overflow: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%;" />

【讨论】：

他正在使用 .net 网络表单，这就是为什么他有 asp:Label 和其他“未知”元素。
是的，我在发布后看到了这个 ASP 部分。嗯..我的回答应该还是对的。
我正在关闭 #divtop 内的 div - 它只是删除了部分细节以保持帖子的大小合理。内联 CSS 几乎只是我在故障排除过程中添加的东西。我添加了溢出：自动，这似乎有很大帮助，但现在它正在渲染到一边。但是，我认为这是我缺少的部分，所以我现在要玩它，看看我是否可以让它表现出来。如果有效，我会将您的答案标记为正确。谢谢。
我不同意您的品脱 4。将溢出设置为自动不是必需。尽管在这种情况下它可以解决问题，但在其他情况下（固定高度，即）可能会产生不同的结果css-tricks.com/the-css-overflow-property 我建议使用propper clearfix 类。不过非常同意第 5 点！

【解决方案3】：

如果可以，请清除 div 中的 float:left。如果那不是一个选项，那么 Kev 会回答您如何解决它。

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

我创建了这个fiddle。看看吧。

【讨论】：