CSS絕對定位夢魘瀏覽器的差異

Question

我有一些代碼，可以讓我有幾個div彈出與他們的HTML。

我知道它在Firefox中像素完美，然後意識到所有其他瀏覽器（未在IE中測試過）都關閉。

任何人都可以告訴我或向我展示一篇關於不同瀏覽器如何處理絕對定位元素以及如何糾正我的困境的文章？

這是my original code，這裏是my new code。

這是我所看到的：

Answer 1

我搞清楚我做錯了什麼。我在p標籤周圍創建了一個div標籤，然後將其寬度設置爲我想要的寬度，因爲在通過使用圍繞p的填充計算空間之前，這裏是我的更新代碼，完美地工作！ （我希望）

更新代碼：DEMO

---

編輯： 我有隱藏箱外各可見箱（用戶單擊以顯示隱藏的），所以當我試圖定位它們時，確定它們將在DOM中的位置並不容易，但是如果您將隱藏的框分別視爲可見框的子項，則可以使用position: relative; CSS財產來定位兒童箱子確切地您想要他們的地方！

CSS

.visibleBox{ 
    position: relative; 
} 

.hiddenBox{ 
    position: absolute; 
    bottom: 0; 
    right:0; 
} 

HTML

<div class="visibleBox"> 
    <p class="hiddenBox">I am hidden sometimes<p> 
</div> 

所以我想說的是，我有P外DIV的，這是使其完全尷尬的位置它正確地在所有瀏覽器中，但使用相對和絕對位置的父母和孩子，它解決了我的問題。

Answer 2

在所有的瀏覽器的絕對定位的定義相同的方式。

元素絕對定位於相對/絕對定位的父元素或身體元素，如果不是這樣的話。

Answer 3

在IE9，Chrome 17和FF9中看起來不錯。相對於div＃userControls添加位置將確保您定位相對於其父節點的絕對節點。