2012-01-30 36 views
5

我有以下代碼與doctype過渡,但是當我將它設置爲嚴格,然後圖像的位置被更改並向上移動。您能否幫我理解底層問題,以及我可以在哪裏找到不同文檔類型之間的其他CSS衝突類型列表。文檔類型和CSS

請注意,我知道很少的HTML標籤在嚴格模式下不可用,但我對CSS衝突有所瞭解。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<body> 
<style type="text/css"> 
span.check:before { content: url("http://i41.tinypic.com/2rxea7d.png"); } 
</style> 
<table> 
<tr> 
<th>Ruby on Rails</th> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
</tr> 
<tr> 
<th>Road on Rails</th> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
</tr> 
</table> 
</body> 
</html> 
+0

在哪些瀏覽器? – vvondra 2012-01-30 12:55:44

+0

在FX 9.0.1和最新的Chrome中,但不確定其他人。 – 2012-01-30 13:11:47

+0

閱讀:http://www.quirksmode.org/css/quirksmode.html – zvona 2012-01-30 12:55:44

回答

4

在特殊模式和幾乎標準模式的圖像(其是內聯內容,所以在同一集線作爲字體的字符的佈局)是zero-height positioned at their baseline

您可以通過旋轉生成的圖像的vertical-align屬性或將其設置爲display: block,在標準模式下獲得相同的效果。

+0

我已經把display:block ;下面的內容是正確的,但它沒有改變任何東西,兩種文檔類型之間的差異保持不變。 – 2012-01-30 13:15:12

0

我希望更改您的文檔類型會改變某些版本的Internet Explorer從標準模式運行到兼容模式的模式。 Internet Explorer(除其他外)更正了它如何解釋邊框模型,但能夠根據DOCTYPE在舊方法和已更正的方法之間切換。