絕對定位：之前在表格與div

我添加了一個僞元素與:before並將其絕對定位到其父，可以是表或div。爲了設計目的，父母還必須具有20px邊框。絕對定位：之前在表格與div

wwhy是firefox和IE不一致的，並且在表格中對待僞元素的定位是不同的？

請看看我的jsFiddle或下面的代碼。

測試與IE10，Chrome29和FF23。

HTML：

<div>i am a div</div> 

<table> 
<thead> 
    <tr><th>header 1</th><th>header 2</th></tr> 
</thead> 
<tbody> 
    <tr><td>entry 1</td><td>entry 2</td></tr> 
</tbody> 
</table>

CSS：

table, 
div { 
    border: 20px solid yellow; 
    position: relative; 
    margin-bottom: 30px; 
    height: 50px; 
} 

table:before, 
div:before { 
    background: red; 
    content: " "; 
    position: absolute; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 10px; 
    height: 10px;  
}

來源

2013-09-23 nerdess

絕對定位的元素可能不像你期望的那樣在FF中的表格元素內表現出來。 – Itay

不知道這是否適用於您的目的，但您可以嘗試輪廓而不是邊界元素。例如：大綱：20px純黃色; –

@ D.Alexander好主意，但不是，它必須是一個邊框，因爲我也應用邊框半徑:( – nerdess

似乎與火狐如何處理表中絕對定位元素的問題。你可以嘗試在他們自己的相對定位的父divs包裝div和表？

檢查此DEMO。

編輯：如果html結構無法修改，請嘗試給出元素box-sizing: border-box;。

這DEMO似乎在我的機器上的Chrome，FF & IE。讓我知道它是不是渲染，我會再試一次。

來源

2013-09-23 11:49:05

也不錯，不幸的是html結構已設置，我無法改變它。我正在使用此chrome css hack現在http://mahaveersingh.wordpress.com/2010/10/31/css-chrome-fix-chrome-alone-css-hack/儘管chrome是正確的，所有其他瀏覽器（FF，IE）都是錯誤的。 – nerdess

似乎是:before工作良好，FF上的表格少佈局。有關於MDN的一些信息可能會有所幫助。

儘管Firefox 3.5中的定位修復程序不允許將內容作爲單獨的以前的兄弟生成（根據CSS規範指出：「之前和之後：僞元素元素與其他框交互...」如同它們是插入只是它們相關的元素內實元素。「），它們可以被用於提供關於無表格佈局略有改善（例如，以實現定心）

當我添加display: block表元素和刪除了固定的高度，它工作正常。

table, 
div { 
    border: 20px solid yellow; 
    position: relative; 
    margin-bottom: 30px; 
    display: block; 
} 

table:before, 
div:before { 
    background: red; 
    content: " "; 
    position: absolute; 
    display: block; 
    top: 0; 
    left: 0; 
    width: 10px; 
    height: 10px; 
}

Working Fiddle

欲瞭解更多信息，請通過MDN。

來源

2013-09-23 12:52:36

絕對定位：之前在表格與div

回答

相關問題