DoctypeとCSS

doctype transitionalを持つ以下のコードがありますが、厳密に設定すると画像の位置が変更されて上に移動します。根本的な問題を理解する上で助けてください。そして、私は、さまざまなdoctypes間のこれらのタイプの他のCSS矛盾のリストを見つけることができます。Doctypeと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>

出典

2012-01-30 Shawn Taylor

どのブラウザですか？ – vvondra

FX 9.0.1と最新のChromeでは、他のユーザーについてはわかりません。 –

Read：http://www.quirksmode.org/css/quirksmode.html – zvona

（インラインコンテンツであるので、フォント文字のようなラインの同一セット上にレイアウトされている）画像zero-height positioned at their baselineあります。

標準モードでも、生成された画像のvertical-alignプロパティを変更するか、display: blockと設定すると、同じ効果が得られます。

出典

2012-01-30 12:59:14 Quentin

私はdisplay：block ;本来のコンテンツの下には何も変わらず、両者の違いはそのまま残っています。 –

doctypeを変更すると、特定のバージョンのInternet Explorerが標準モードから互換モードに切り替わることが予想されます。インターネットエクスプローラは、境界ボックスモデルをどのように解釈するのかを修正しましたが、DOCTYPEに応じて古いメソッドと修正されたメソッドを切り替えることができました。

出典

2012-01-30 13:01:29

答えて

関連する問題