絕對定位DIV在瀏覽器中不一致

我有一個絕對定位DIV的問題 - 它並不坐在瀏覽器中完全相同的位置。問題是我的大部分內容是由JSP文件生成的，我必須應用CSS並在CMS中創建我的內容，而不是在此文件中。代碼的結構如下：絕對定位DIV在瀏覽器中不一致

   <div id="automatic-container"> 
       <div class="one"> 
       <div class="oneWeird"></div> 
       <div id="content-container"> 
        <div id="some-content1"></div> 
        <div id="some-content2"></div> 
       </div> 
       <div id="absolutely-position">plain text is inserted here via JSP file, wrapped only in div tags. adding/styling p tags does not help</div> 
       </div> 
       </div>

除「content-container」之外的所有內容都由JSP文件自動生成。「絕對位置」div中的內容應放置在「內容容器」中的內容之上並坐在特定位置。一個奇怪的是一個由JSP創建的div，似乎沒有任何目的，我可以告訴...

我應用了以下CSS，絕對位置DIV在每個瀏覽器中都有幾個像素（我檢查過Chrome，IE7,8,9，FF，Safari）。它匹配在Chrome瀏覽器，Safari瀏覽器& IE8。在FF中，它高出約3個像素，IE 9高出5個像素，而在IE7中則下降了大約10個像素。

   #automatic-container{position: relative; padding: 0px; margin: 0px auto;} 
       #automatic-container div.one {position: relative; padding: 0px; margin: 0px auto;} 
       #automatic-container div.one div.oneWeird{display: none;} 
       #content-container{margin: 0px auto; width: 848px; height: 354px; background:url('bkg_confirm.jpg') no-repeat; font-family: Helvetica,Arial,sans-serif; position: relative; padding: 0;} 
       #some-content1{position: relative; margin: 0px; text-align: center; padding: 0; width: 490px; height: 354px; left: 343px; top: 30px;} 
       #some-content2 {position: relative; width: 490px; height: 55px; border-top: 1px solid #cccccc; padding: 0px; margin: 60px 0 0 0; overflow:hidden;} 
       #absolutely-position{height: 20px; left: 420px; position: absolute; text-align: center;top: 125px; width: 465px;font-weight: bold; padding: 0px; margin: 0px;}

有關如何獲得絕對位置DIV跨瀏覽器一致的任何想法？我在SO或其他地方找到的文章都沒有幫助。我曾嘗試將定位更改爲相對並使用z-index，但這也產生了不一致的結果。當我通過在線驗證運行時，我的代碼也很乾淨。

在此先感謝您的幫助。

來源

2012-10-24 surfbird0713

製作[JSFiddle]（http://jsfiddle.net）和我會盡力幫助！ – jmeas

在應用正常的css之前，將復位：http://meyerweb.com/eric/tools/css/reset/或Normalize.css http://necolas.github.com/normalize.css/應用於您的頁面。我幾乎保證你正在運行的是不同瀏覽器使用的不同默認樣式。

重置所做的是在開始應用自己的樣式之前將所有樣式設置爲基準。因此，如果Chrome爲某元素應用了x數量的保證金，並且IE應用了Y金額，則復位將它們都設置爲0.缺點是您使用的每個元素都必須進行重新設置。例如，列表不再具有默認樣式，也不會使用塊引號等。

Normalize.css對於新手來說使用起來稍微容易一些，因爲它爲複雜操作設置了基本樣式，但它爲大多數情況提供了樣式而不是將它們設置爲0，所以你的列表仍然會用子彈縮進，但它們在所有瀏覽器（或應該）上看起來都是一樣的。

來源

2012-10-24 20:57:02

感謝您的建議！我將Meyer的重置作爲起點並進行了編輯，以便僅影響我正在工作的CMS區域內的內容。 – surfbird0713

絕對定位DIV在瀏覽器中不一致

回答

相關問題