IE 6/7和浮動

我的額頭因挫折而受挫。在符合標準的瀏覽器中，我的佈局看起來很好，但是，當然，IE7和IE6喜歡把所有東西搞得一團糟。我正在嘗試製作一個簡單的標題，其中有一些文本在左側，右側是內嵌表單。標題寬835px，並使用自動邊距居中。這是我的代碼：IE 6/7和浮動

<div id="header"> 
    <span>Some Text</span> 
     <div style="display: inline; float: right; margin-top: 6px; position: relative;"> 
      Jump to: <form ... style="display: inline;"> blah blah </form> 
     </div> 
</div>

據我可以告訴IE6/7處理含有的形式作爲一個塊元件在div。它正確顯示在標題div的右側，但被推下。我試圖給內部div一個寬度和絕對位置，但無濟於事。如果可能，我實際上希望避免絕對定位以及條件語句。必須有一些我忽略的東西。有什麼建議麼？

更新：這裏是IE7 截圖alt text http://vincentalcivar.com/ie7.png

來源

2010-07-24 vince88

更改<span>Some Text</span>至<span style="float: left;">Some Text</span>。

此外，您可能需要刪除以從DIV刪除margin-top: 6px; position: relative;。

編輯：這是代碼。

<div id="header"> 
    <span style="float: left;">Some Text</span> 
    <div style="display: inline; float: right;"> 
    Jump to: <form style="display: inline; margin: 0;"> blah blah </form> 
    </div> 
    &nbsp; 
</div>

增加了一個 （並取消overflow: auto;），因爲IE6認爲該行有花車後沒有內容。

來源

2010-07-24 13:18:17

這似乎適用於IE瀏覽器，但會導致其餘瀏覽器不正確地顯示頁面內容的其餘部分。我會研究可能改變其他元素的屬性，看看是否有效。 – vince88 2010-07-24 13:30:43

hmm。到目前爲止，解決方案似乎在內部div之後添加了

，並且清除了其他內容的問題，並且使得它在每個瀏覽器中都可以正常顯示。這可能不是最優雅的解決方案，因爲它增加了更多的標記。有沒有更好的辦法？ – vince88 2010-07-24 13:42:26

現在，它在所有瀏覽器中都能很好地工作......並且在IE6中也是如此。 :) – 2010-07-24 13:51:16

我不知道爲什麼你所標記的元素，如你有，但對一些文本的左側和形式的權利，我會做如下：

<div id="header"> 
    <div id="text_holder"> 
     <p>Lorem ipsum dolor set amet.</p> 
    </div> 
    <form> 
     ... 
    </form> 
</div>

下面CSS：

#header { 
    width: 835px; 
    margin: 0 auto; 
    overflow: auto; 
} 
#text_holder { 
    float: left; 
} 
#header form { 
    float: right; 
}

來源

2010-07-24 13:11:19

我沒有在時刻訪問IE6/7。但是，每個瀏覽器都有浮動錯誤。添加zoom: 1的CSS屬性將觸發hasLayout這些元素，並幫助他們呈現如預期。

雖然您不需要通過條件樣式表添加它，但我會推薦它，因爲它是瀏覽器特定的修補程序。

有可能您的某些其他樣式有衝突。我不知道你是否試圖解決這個問題，但display: inline應該沒有必要。

它可能會幫助張貼在IE6/7的東西看起來的屏幕截圖。

來源

2010-07-24 13:14:56

回答

相關問題