在Firefox中Div错误地渲染 [英] Div rendering incorrectly in Firefox

问题描述

我的网页呈现，我期望在IE浏览器。当我进入Firefox时，它会在错误的地方渲染一个重要的div，将布局关闭。据我所知，Firefox是错误的。我怎样才能让Firefox在正确的位置呈现div？

我已经在三个div上放置了边框，以便更容易地看到它们在哪里渲染。紫色的是在FF中不正确的，但在IE中是正确的。

编辑

JSFiddle：中的工作：

  .clearfix {
 * zoom：1; 
&：before，
&：在{
 display：table; 
内容：; 
 //修复Opera / contenteditable错误：
 // http://nicolas.google.com/micro-clearfix-hack/#comment-36952 
 line-height：0; 
} 
&：后面{
 clear：both; 
 
 
 
 
 $ b $ p 
 $ b $ p你只需要将它应用到 #divTop 容器，你应该没问题。有关如何和为什么它的作品的解释可以在这里找到： http://nicolas.gallagher.com/micro-clearfix -hack /  
 
My web page renders as I expect in IE. When I get into Firefox, it renders an important div in the wrong place, throwing the layout off. From what I can tell, Firefox is just wrong. How can I get Firefox to render the div in the correct place?

I've put borders around three of the divs to make it easier to see where they're being rendered. The purple one is the one that is incorrect in FF, but correct in IE.

EDIT

JSFiddle: http://jsfiddle.net/PYy6t/1/

JSFiddle renders the code identically (and in the same manner as FF) in both browsers, but IE10 renders it as I want it, and as my screenshot shows, when actually running the page.

My code:
<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%;" />
The Firefox render:


The IE render:


As you can see, FF is starting the div way up above the header text and the top hr, despite the fact that both should be taking the entire width. This is causing the second hr to render underneath the red-bordered panel (along with a label that should be further down the page), rather than beneath the purple panel. What am I missing?
解决方案
Your issue is known as the clearfix problem. It is not only occuring in FF, but also in webkit browsers (safari and chrome). I even think that only IE handles it as you state you expect it to. 

The problem only occurs when you have a parent div container, with all its children floating inside it. For a better explanation i suggest googling 'clearfix'.

The solution stated by @Kev does indeed work, but it requires you to a an extra element to your DOM, wich is only used for styling, wich is considered bad practice. I suggest working with some sort .clearfix class. I usualy work with the one from 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;
  }
}
All you have to do is apply it to your #divTop container and you should be fine. An explanation on how and why it works can be found here: http://nicolasgallagher.com/micro-clearfix-hack/

                        
这篇关于在Firefox中Div错误地渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！