如何修復IE中這個簡單的CSS浮動問題？

我有四個div元素漂浮在左邊。第三個div已清除。
在Firefox和Chrome中，元素按預期定位：第一個和第二個div彼此相鄰，並且高於彼此相鄰的第三個和第四個div。
IE7另一方面將第四個div放置在第一個和第二個div的旁邊，第三個div放在下面。如何修復IE中這個簡單的CSS浮動問題？

我知道我可以通過在第二個div之後添加一個br元素來解決這個問題，但是如果我不必這樣做，我寧願不編輯標記。有沒有更好的解決問題的方法？

我一直在嘗試谷歌修復一段時間，但還沒有找到一個，考慮到這個問題的基本原理，這是相當令人驚訝的。也許我錯過了一些顯而易見的東西，有沒有一個參考網站列出了像這樣的簡單CSS問題，或者我對基本CSS一無所知？

編輯：在Nazgulled「解決」了問題後，我已經使示例代碼稍微複雜一些（請參閱註釋）。現在有四個div而不是三個，第三個div被清除而不是第二個。

下面是完整的源代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"> 
     <title>IE Float Test</title> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
     <style type="text/css"> 
      div 
      { 
       width: 100px; 
       height: 100px; 
       color: white; 
       font-size: 3em; 
       float: left; 
      } 

      #divone 
      { 
       background-color: red; 
      } 

      #divtwo 
      { 
       background-color: blue; 
      } 

      #divthree 
      { 
       background-color: green; 
       clear: both; 
      } 

      #divfour 
      { 
       background-color: purple; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="divone">one</div> 
     <div id="divtwo">two</div> 
     <div id="divthree">three</div> 
     <div id="divfour">four</div> 
    </body> 
</html>

這裏是什麼樣子的Chrome：
Chrome sample http://img301.imageshack.us/img301/3135/chromev2tp4.png

這裏是什麼樣子的IE7：
IE Sample http://img111.imageshack.us/img111/8195/ie7v2cg3.png

來源

2009-01-25 brianpeiris

幾個月後...

我放棄了試圖用CSS來解決這個問題。這是一個IE7的錯誤，你無需觸摸你的HTML就無法避免。

該浮動圖案的最終應用是在一種形式中，其中兩個div是輸入元素，另外兩個div是它們的對應標籤。該模式被大量使用多次，我真的很想找到一個優雅的CSS解決方案。

我最終結束了使用Object Oriented CSS Framework幷包裝所有元素與附加div s爲了創建所需的佈局，如OOCSS規定。這是從IE7的CSS地獄拯救我靈魂的唯一方法，一旦你完成初始佈局，OOCSS並沒有那麼糟糕。

事實上，最普遍的回答是，這是哪門子的問題，你提出，當你真的不知道你用CSS做什麼。如果你不得不在藍月亮裏創建一個複雜的佈局，那麼你可能不知道你在做什麼;就像我問這個問題的情況一樣。

儘管IE7無法正確渲染CSS，但這也是我錯誤的範圍。 CSS並不是天真的程序員所能達到的最終佈局語言，CSS並不是真正獨立於HTML的結構。當我真的花時間學習CSS的基礎知識時，我又一次選擇了使用OOCSS框架的更簡單的方法。

唉，這是截止日期的後果。

來源

2009-10-04 07:06:17 brianpeiris

嘗試添加：

display:inline-block;

in #divtwo。如果這樣的作品，我當然會增加一些有條件的評論對IE7

來源

2009-01-25 04:38:46 GregD

display：inline;應該爲IE6工作 – GregD 2009-01-25 04:41:45

儘量避免有條件的評論。 – Soviut 2009-01-25 04:41:50

我剛試過。 display：inline-block在IE7 – brianpeiris 2009-01-25 04:52:17

我不知道這是否解決您的真正的問題，但我固定你的樣品是這樣的：

取出浮動屬性從DIV
取下#divtwo
的明確屬性添加浮動：左到#divtwo和#divthree

這使得它看起來既像在Firefox和IE 7的鍍鉻樣品（瀏覽器我測試）。

來源

2009-01-25 05:07:44

我不能確定你的最終目標是在這裏什麼，但我會建議圍繞四個<div>個容器元素內，應用寬度，然後從#divthree取出clear風格。這樣做，這樣將使#divthree和#divfour移動下面#divone和#divtwo不清除它們：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"> 
     <title>IE Float Test</title> 
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
     <style type="text/css"> 
       #divone, #divtwo, #divthree, #divfour 
       { 
         width: 100px; 
         height: 100px; 
         color: white; 
         font-size: 3em; 
         float: left; 
       } 

       #divone 
       { 
         background-color: red; 
       } 

       #divtwo 
       { 
         background-color: blue; 
       } 

       #divthree 
       { 
         background-color: green; 
       } 

       #divfour 
       { 
         background-color: purple; 
       } 

       #container { 
         width: 200px; 
         zoom: 1; 
       } 
     </style> 
    </head> 
    <body> 
    <div id="container"> 
     <div id="divone">one</div> 
     <div id="divtwo">two</div> 
     <div id="divthree">three</div> 
     <div id="divfour">four</div> 
    </div> 
    </body> 
</html>

的zoom財產上#container是必要的，以避免IE6/7 Escaping Floats Bug。

如果上述方案是不可行的，你可以#divtwo後的風格clear: left;添加<br>或<div>：

<div id="divone">one</div> 
<div id="divtwo">two</div> 
<br style="clear: left;" /> 
<div id="divthree">three</div> 
<div id="divfour">four</div>

這是a floated page layout example on westciv.com使用的技術。

來源

2009-01-25 08:06:41 cowgod

如何修復IE中這個簡單的CSS浮動問題？

回答

相關問題