Firefox IEの表示の違い DTDで表示モードの切り替え
Firefox IEの表示の違いに悩まされている人はたくさんいるようです。
僕もその一人ですが・・・。
ウェブ標準なサイトつくりを目指しXHTMLでページを作り直そうと決心したのはいいが、FirefoxとIEの表示の違いをXHTML+CSSではどう回避すればいいでしょう？。
xml宣言をするとIE6では後方（過去）互換モードが適用されるというバグがあるし、
すべてのブラウザで標準準拠モードが採用されるためにはxml宣言を省略するしかない。
（詳しくは「Firefox IEの表示の違い クロスブラウザ「ブラウザ互換 DTD」とは？ 」を参照。）
というわけで、xml宣言なしでページを作ることでひと段落したのだが・・・
xml宣言してIE6だけCSSハックする
「xml宣言」はW3Cでも強く推奨されている。
ウェブ標準を目指すならなるべくW3Cの推奨は守っていきたい。
というわけでやはり「xml宣言」はしておきたい。
「xml宣言」をした上で、バグのでるIE6だけCSSハックすることにしました。
散々悩みましたが、コレが一番一般的な方法らしい。
Windows MEあたりではIE6以上は実装できませんし、
まだまだIE6を使っている人はたくさんいます。
IE6は未だに無視できないシェアを持っているブラウザですね。
と、言うわけで「xml宣言」をしたコードは以下のようになります。
XHTML1.1DTD xml宣言あり システム識別子あり
「XHTML1.1」、または「XHTML1.0」では「xml宣言」するとIE6だけ「後方（過去）互換モード」が採用されてしまいます。
そこを踏まえてIE6にだけ「CSSハック」を行います。
<?xml version="1.0" encoding="ECU-JP"?>
<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type"
content="text/html;charset=ECU-JP" />
IE6だけCSSハック
IE6を狙った「CSSハック」は色々あるのでそれらを使ってレイアウトの崩れを防ぎます。
では、実際に「標準準拠モード」とIE6の「後方（過去）互換モード」ではどこが違ってレイアウトが崩れるのかをチェックしましょう。
問題はボックスモデルのwidth、heightの解釈の違いからレイアウトが崩れます。
まず、「標準準拠モード」でのブロックモデルのwidth、heightですが、コンテンツの幅、高さがそのままwidth、heightとなるのに対して、IEの「後方（過去）互換モード」では、padding+border+コンテンツの合計がwidth、heightになってしまいます。
上記のようにボックスモデルの解釈が変わってくるのでIE6のCSSハックで、
widthまたはheightを標準モードよりborder+paddingの分だけ大きくすればレイアウトが崩れませんね。
「ボックスモデル」については、
『Firefox ＩＥ の表示の違いをまとめてみる 』を参照して下さい。
次の記事で今までの記事を一度まとめてみたいと思います。
『Firefox IE 表示の違い 「クロスブラウザ」まとめ 』
- posted：2007/10/23：Tue
- 22 ： 14： 40
- ：ブラウザ
- ：CSS Ｆｉｒｅfox IE XHTML
- ：RSS
- comments : 0
- trackbacks : 0
- ：edit
Comments
What say you?
Track backs
http://digdagdig.blog117.fc2.com/tb.php/125-b50a5d11
