Неправильное отображение Div в Firefox

Question

Моя веб-страница отображается, как я ожидаю, в IE. Когда я попадаю в Firefox, он делает важный div в неправильном месте, отбрасывая компоновку. Из того, что я могу сказать, Firefox просто ошибается. Как я могу заставить Firefox отображать div в нужном месте?

Я установил границы вокруг трех разделов, чтобы было легче увидеть, где они отображаются. Фиолетовый - тот, который неверен в FF, но правильный в IE.

EDIT

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

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 является началом Дива пути над текстом заголовка и верхний час, несмотря на то, что оба должны брать всю ширину. Это приводит к тому, что второй hr будет отображаться под красной рамкой (вместе с меткой, которая должна быть далее вниз по странице), а не под фиолетовой панелью. Что мне не хватает?

Answer 1

Ваша проблема известна как проблема clearfix. Это происходит не только в FF, но и в браузерах webkit (сафари и хром). Я даже думаю, что только IE обрабатывает его, как вы утверждаете, вы ожидаете этого.

Проблема возникает только при наличии родительского контейнера div со всеми его дочерними элементами, находящимися внутри него. Для лучшего объяснения я предлагаю googling '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 2

Ваш HTML совсем недействителен. Я не знаю, используете ли вы какую-нибудь причудливую CMS, но это совсем не так.

1. вы не закроете дивы внутри #divtop
2. с помощью CSS встроенного в HTML является плохой практикой, как это должно быть очень бедны изменениями.
3. , если вы хотите, чтобы ваш DIVS бок о бок, они должны получить атрибут стиля float:left
4. если вы хотите, чтобы обернуть фиолетовый DIV вокруг других, он должен иметь overflow:auto для того, чтобы изменить размер со своими детьми
5. 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 3

Если вы можете, то снимите поплавок: левый у вас в дивы. Если это не вариант, тогда Кев ответил, как вы можете это исправить.

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

Я создал этот fiddle. Взглянуть.