Question

我的网页正如我在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渲染： FirefoxPic

IE呈现： IEPic

正如你所看到的，FF正在头文本和顶部hr之上开始div，尽管两者都应该占据整个宽度。这导致第二小时渲染在红色镶边面板下方（以及应该在页面下方的标签），而不是在紫色面板下面。我错过了什么？

Answer 1

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

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

Answer 2

您的问题被称为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/

Answer 3

如果可以的话，请清除浮动：离开你的div。如果那不是一个选项，那么Kev回答你如何解决它。

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

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

在Firefox中Div渲染不正确

3 个答案: