DOCTYPEスイッチ
DATE：05-10-31 Category：Web
久々にモロ仕事ネタです。 xhtmと、cssのお話ですが、半分は自分へのメモ。
xhtml Transitionalでコーディングする場合
<?xml version="1.0" encoding="文字コード"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">っていうのを先頭に入れます。
<?xml version="1.0" encoding="文字コード"?>はxml宣言です。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">はDOCTYPEスイッチと呼ばれています。
これを省いたり変えたりすると、後方互換モード（正しく解釈しない古いブラウザ用の解釈)になります。
有名なところではボックスサイズの違い。
widthの範囲に、paddingと border-widthを含んでしまうって悲しいやつですね。
これは、正しい解釈ができないブラウザが一般的だった頃作られたサイトがモダンブラウザで見ると、ことごとく崩れちゃうってのを防ぐ目的があったみたいです。「正しいcssを知らないんだったらDOCTYPE文もまともにかかないでしょ！だったらこれが正しくないやつは昔の解釈で表示させてやろう。」っていう優しさです。
じゃあ、普通にヘッダには、
<?xml version="1.0" encoding="文字コード"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">と入れておけばいいはずなんですが、
また、やってくれたんですよ。IE6。
このバカはDOCTYPE文の前に何かを入れると後方互換モードになるという恐ろしい仕様があります。
正しいxhtmlを書こうとxml宣言を入れると、ボックス幅がIE5,5.5みたいな解釈になってしまう訳です。
さらに通常のボックスモデルハックはIE6には効きませんので、最低です。これがxml宣言を省いているサイトが多い原因です。
xml宣言を入れると、IEは全部(４とかはしらん) widthとheightにpadding borderも含めるって解釈に統一されます。そこで、IE5,5.5,6のみ読み込めるアンダースコアハックを使います。
例えば、幅500pxで左右のpaddingが20pxずつのボックスを作りたい場合。div{width:460px; _width:500px; padding:0 20px;}本来の幅は460pxですが、解釈の違うブラウザでは500pxになります。これで、モダンブラウザとIE両方に正しく表示させる事ができました。
これで、OKそうなんですが、Opera7あたりが怪しいとのをチラホラと。今調べていますが、知ってる方是非教えてください。
/*-------追加-------*/
Opera7.03以下だと、xml宣言が合った場合、後方互換モードになっちゃうみたいです。まあ、気にするレベルではないかも。
trackback
このブログ記事に対するトラックバックURL:
http://s-bot.net/MT/mt-tb.cgi/82
Comment 0
コメントする(アルファベットのみのコメントは投稿できません。)