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渲染不正確

回答

相關問題