Firefox中的Div渲染不正确

我的网页按照我在IE中的预期呈现。当我进入Firefox时，它会在错误的地方渲染一个重要的div，并将布局关闭。据我所知，Firefox是错误的。我如何让Firefox在正确的位置渲染div？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开始在div一路上涨的标题文字上方和顶部小时，尽管事实上两者都应该采取整个宽度。这会导致第二个小时在红色边框面板下面呈现（以及应该在页面下方的标签），而不是在紫色面板下面。我错过了什么？

来源

2013-04-03 Travis

Firefox可能不只是错误。你有一个jsfiddle吗？ – dezman 2013-04-03 20:41:10

请提供一个简化的[jsFiddle]（http://jsfiddle.net），显示问题 – Adrift 2013-04-03 20:43:58

无法确定没有JSFiddle或Live网站来解决问题，但这看起来像一个明显的问题。什么版本的IE？ – Michael 2013-04-03 20:46:59

您的问题被称为clearfix问题。它不仅发生在FF中，而且还发生在webkit浏览器（safari和chrome）中。我甚至认为只有IE处理它，就像你说的那样。

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

@Kev声明的解决方案确实有效，但它需要你为DOM添加一个额外的元素，这只用于造型，这被认为是不好的做法。我建议使用某种.clearfix类。我usualy与一个工作从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/

来源

2013-04-03 21:18:51 Pevara

你，先生，真棒。非常感谢你。这解决了我的问题，没有任何额外的编码，链接非常丰富。再次感谢。 – Travis 2013-04-04 13:37:09

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

你不使用HTML CSS内嵌关闭内部#divtop
你的div是不好的做法，因为它应该是在不断变化的非常差。
，如果你想边的div的一面，他们必须得到样式属性float:left
，如果你想环绕其他紫色格，它必须有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%;" />

来源

2013-04-03 20:51:19 danielwinter

他正在使用.net webforms，这就是为什么他有asp：标签和其他“未知”元素。 – trajce 2013-04-03 20:54:58

“InternetExplorer永远不会是正确的”<3 – 2013-04-03 20:56:03

是的，我发布后看到这个ASP部分。好..我的答案应该仍然是对的。 – danielwinter 2013-04-03 20:56:55

如果可以，然后清除浮动：左你有你的div。如果这不是一个选项，那么凯夫回答你如何解决它。

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

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

来源

2013-04-03 20:53:32 trajce

Firefox中的Div渲染不正确

回答

相关问题