top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1163

互換モード:さて、「互換モード」とはなんぞや。正確に理解できているのか?対応はどうなのか?少し調べてみる ・・・ 【ブラウザ】

 2009-11-19
 実は先日、
 ・(管理している)ある顧客サイトで
  ・IEにおいて、互換モードがからむ不具合が
   見つかった。
   (要は、互換モードにしないと表示崩れがおきるのだ)
 また、
 ・(時折出てくる話で)
  ・HTMLの最初に、xml宣言を加えると
   IE6が、「互換モード」で動いてしまうから・・・
 なんてのもある。

 じゃぁ、
  ・互換モードにしたら(なったら)何が悪いのだ?
  ・互換モードのメリット・デメリット
  ・今後は?
 自分で完全に理解せず、これら使っているな、と感じ。
 反省。
 少々調べてみる。


  追記に ▼


FC2ブログランキング にほんブログ村 IT技術ブログ Webサイト構築へ ブログ王ランキング 人気ブログランキング 人気ホームページランキングへ


more

************************************************
◎ 互換モード の巻:知識いい加減を少しでもなんとか
************************************************


 まず、(いつものように)今更ですが・・・
 ■互換モード - Wikipedia
  を、参照させていただく。
コンピュータのソフトウェアにおいて、
旧式のシステム(プロセッサやオペレーティングシステム、
プラットフォームなど)との互換性(後方互換)を保つため、
新式のシステム上で旧式のシステムを再現する機能の1つ
 ・・・まぁ、それはわかる。

  今回ちゃんと理解したいのは、
 ■Webブラウザの互換モード - Wikipedia
  から、引用転載。

・完全にW3C標準仕様に従ったレンダリングのみを行うと
 サイト作成者の意図した通りの表示にならず問題が発生する可能性
 ・・・このために、ブラウザごとの対応のレベルとして、
標準モード(標準準拠モード/Standardモード)
 ・標準仕様に従ったレンダリング
互換モード(過去互換モード/後方互換モード/Quirksモード)
 ・従来の慣行的なレンダリング
準標準モード(Almost Standardモード)
 ・標準仕様に従いつつも慣行的なレンダリングを一部で残す
 ・・・である、と。
    (DOCTYPEスイッチ で切り替える)


 


  で、状況、基本理解として
  □DOCTYPE宣言を行っていないか
   HTML3.2以前のもの
   の場合    > 互換モード(になる)
  □HTML4.01(のStrictDTD)以降の場合
   の場合    > 標準モード(になる)
  □(ただし、よく知られているバグ、として)
   IE6においては、
   ・XML宣言 を行うと
    を行うと  > 互換モード(になってしまう)

 調べて、各ブラウザでの切替状況をまとめておく。


 ※○・・・標準モード、 ●・・・互換モード
DOCTYPE宣言
IE(6)IE(7)IE(8)FirefoxOpera(8)Opera(9)Safari
宣言なし
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<?xml version="1.0" encoding="…"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?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">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 ※参照させていただいた頁
  > 標準モードと互換モードについて:HTMLタグ辞典 - HTMLタグボード
  > The Opera 8 DOCTYPE Switches
  > Opera 9 の DOCTYPE スイッチ

 


 また、こちらのやりとりは非常に参考になった。
 ・DOCTYPEスイッチの後方互換モードや標準モードに関して
  ・現状と、手間、将来、需要
   さまざまな視点で、みなさん考えていらっしゃるのだな、と。

 で、
 ■これら、ブラウザのモードの違いによる
  CSSなどによる表現の違いなどについて、いくつかのTIPSを探し
  ※それぞれ 引用(まとめ)転載 (ほんと、役立つ情報ばかりで・・・)


  □互換モード(Quirks モード) 時 の box モデルを扱いやすくするための CSS
   ※互換モード前提で Web ページを構築する場合にのみ役立つ小技
   ・特にレイアウトに影響を及ぼす、
    ・width に padding や border を含めるか否かの違い に焦点
     ・互換モード時
      > IE では強制で
        border-box (width に padding や border を含める) の解釈
      > Firefox などでは
        content-box (width に padding やborder を含めない)で解釈
    ・(対策)box モデルの解釈のされ方を border-box に統一

table{ font-size:100%; } /* IE で table 内に font 関連のプロパティーが継承されない問題の対策も追記 */
*{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
 ありがとうございます。
 > 互換モード(Quirks モード) 時 の box モデルを扱いやすくするための CSS | ヨモツネット

 


  □IE8互換モードについて
   ※ IE8 のドキュメント モードについて解説
   ・IE8 には3種類のドキュメント モード
    ・IE8 標準モード: IE8 で利用可能な機能を全て利用して表示
    ・IE7 標準モード: IE7 と同等な機能を利用して表示
    ・Quirks モード: IE5 と同等な機能を利用して表示
     ・DOCTYPE 宣言で指定
      > DOCTYPE 宣言により IE8 標準モードと Quirks モード
      > DOCYTPE 宣言では IE7 標準モードには切り替えることはできない
      > HTML4.0 Frameset の DOCTYPE 宣言で
        DTD の URL を記述していない場合 Quirks モード


  □アフィリエイトは儲かんないってば:DOCTYPE スイッチと表示の差
   ※2年前の記事ではあるが、状況や考え方を理解、まとめるのに
    非常に参考にさせていただいた。


   さらに、ここで紹介されている記事

  □標準準拠・後方互換モード各々の CSS 解釈の違いをまとめたドキュメントを共有
   ※これも、2年前の記事ではあるが、非常にためになった。ありがとうございます。


 さて、
 ■で、どうするか・・・
  大きなテーマだなぁ。


  少し実験を始めてみようと思っている。(しばらく、お時間を・・・)

commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1163-d1369353
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。