周圍圖像IE7浮動文本內浮動的div

工作只是浮動文本週圍的圖像，但它不是在IE7順利。文字被推到圖像的下方，就好像沒有浮動。周圍圖像IE7浮動文本內浮動的div

從我讀過的，其原因可能是圖像和文本是浮動（和固定的寬度/高度）div，這大概會觸發「hasLayout」爲包含div。我一直在尋找一個乾淨的解決方法，但還沒有找到。

在最壞的情況下，我想，因爲我已經使用了頁面上，我可以使用jQuery的，但我寧願用CSS來解決這個問題。

Here is a fiddle，效果很好很好的瀏覽器，但在IE7應該失敗。

好（火狐，Safari，Chrome瀏覽器，歌劇，IE8 +）：

Good image

壞（IE7）：

Bad image

HTML：

<html> 
<body> 
    <div id="box_section"> 
     <div id="container1"> 
      <div id="container2"> 
       <div class="box"> 
        <img src="http://c69282.r82.cf3.rackcdn.com/robot.jpg"/> 
        <p>Lorem ipsum etc etc whatever.</p> 
       </div> 

       <div class="box"> 
        <img src="http://c69282.r82.cf3.rackcdn.com/pushing278.jpg"/> 
        <p>Lorem ipsum etc etc whatever.</p> 
       </div>      
      </div> 
     </div> 
    </div> 
</body> 
</html>

CSS ：

/* Container for floating boxes */ 
#box_section 
{ 
    height: 300px; /* Fixed height and width */ 
    width: 984px; 
    margin-top: 35px; 
    padding: 0; 
    overflow: hidden; 
    margin-left: auto; 
    margin-right: auto;  
} 

/* Containers used to centre floated items independent of number */ 
/* In real webpage there can be any number of boxes. */ 
#container1 
{ 
    padding: 0; 
    float:left; 
    width:100%; 
    overflow:hidden; 
    position:relative; 
} 

#container2 
{ 
    clear:left; 
    float:left; 
    padding:0; 
    position:relative; 
    left:50%; 
} 

/* The box. OMG. */ 
.box 
{ 
    float: left; 
    position:relative; 
    right:50%; 
    height: 190px;   /* Note fixed height and width */ 
    width: 350px; 
    border-style: solid; 
    border-color: #ebead4; 
    border-width: 1px; 
    padding-top: 10px; 
    padding-left: 10px; 
    padding-right: 10px; 
    margin: 20px; 
    overflow: hidden; 
} 

/* Goal is to float text around image. Note that images have fixed width/height. 
Images snatched from random website for demonstration purposes. */ 
.box img 
{ 
    float: left; 
    margin-right: 15px; 
    height: 180px; 
    width: 200px; 
    border-style: solid; 
    border-radius: 5px; 
    border-color: #eeeeff; 
    border-width: 1px; 
}

請注意，包含div的解決方案必須非常靈活，因爲可以有任意數量的這些框，並且它們必須浮動在中間（jQuery用於一次只顯示一行）。箱子也可以是4種不同固定寬度中的任何一種。

而且這是由以下事實：該圖像可以是2米的寬度（2不同的CSS類）之一，或不應該存在於所有進一步複雜化。我想過讓圖片的位置絕對，並用邊距來做，但因此失敗。

來源

2013-02-13 Oystein

怪異地在IE7中工作正常。我建議刪除位置：相對.box asit似乎並不需要，也可以考慮添加一個css重置文件或至少聲明「* {margin：0; padding：0;}」 – 2013-02-13 09:39:08

哦，對不起，我有「* {margin：0; padding：0;}」。關於位置的相對位置，這只是我試圖用圖像的絕對位置來解決這個問題的遺留問題。抱歉。不知道爲什麼它在IE7中適合你，但是我還沒有試過IE7中的小提琴，因爲IE9的兼容模式不允許我（並且這是我擁有的最老的IE）。 – Oystein 2013-02-13 09:42:33

您的頁面中是否聲明瞭有效的文檔類型？ – 2013-02-13 09:44:30

噢報廢它。我的錯。

原來，小提琴在IE7中工作正常，問題是，我不得不爲它設置最小寬度「頭」元素全局CSS規則。我在箱子裏使用了標題元素......現在感覺非常聰明。

感謝大家誰試圖幫助。

來源

2013-02-13 13:26:45 Oystein

這段代碼添加到您CSS

.box p{ 
    float:left; 
    width: 130px;  
}

http://jsfiddle.net/2VbGq/1/

來源

2013-02-13 09:34:34

這似乎並不奏效。另外，請注意，圖像不必在那裏，並且盒子可以是4種尺寸中的一種。我可能需要添加jQuery的邏輯來設置這個寬度。 – Oystein 2013-02-13 09:40:22

但IE7是道德上舊的瀏覽器）），\t 這足以支持它 – 2013-02-13 09:47:59

如果你想要你可以使用這個http://code.google.com/p/ie7-js/ – 2013-02-13 09:50:04

嘗試這樣的....移除內容的任何圖像浮動到左邊，希望這將工作「P」標籤...

來源

2013-02-13 09:53:21 Gopikrishna

這沒有什麼區別.. – Oystein 2013-02-13 10:09:09

周圍圖像IE7浮動文本內浮動的div

回答

相關問題