解決td標籤上的position:relative屬性在各瀏覽器中的兼容性問題

在css中的position屬性規定了頁面元素的定位類型，它有如下幾個值：

    absolute：絕對定位，相對於static之外的第一個父元素進行定位；

    fixed：生成絕對定位的元素，相對於瀏覽器窗口進行定位；

    relative：生成相對定位的元素，相對於其正常位置進行定位；

    static：默認值，沒有定位；

    inherit：繼承父元素的position值；

若是一個塊A要在塊B中進行絕對定位，則咱們能夠把塊A的position值定爲absolute，把塊B的屬性值定爲relative，這樣，塊A就會相對於塊B進行絕對定位。

最近在項目中碰到一個這樣的問題，table元素的其中一個td的裏面會生成一個div，這個div相對於該td進行定位，以下圖：

td的position值爲relative，div的position值爲absolute。這樣作在chrome裏面沒有任何問題，但到了firefox和ie中，就出現問題了，以下圖：

在圖中能夠看到，該td元素的邊框沒有了。而若是我把td元素的position:relative這個樣式給去掉，它又能正常顯示了。後來查了些資料，初步估計是td元素和div元素對position:relative樣式在各瀏覽器中的支持和表現形式不一致。解決方法是這樣的，在td裏面再套一個div元素，這個div元素具備position:relative這個樣式。以下圖：

而後再換到頁面，就會發現這個問題解決了。

參考資料：http://www.w3school.com.cn/cssref/pr_class_position.asp和http://blog.csdn.net/netpet/article/details/5223496。