#freeze
 * CSSハック [#pd12f8c6]
 
 ** よく使うCSSハック [#z9cf4209]
 
 予備知識。
 - スターハック("*")は基本的にIEに適用され、それ以外に適用されない。
 - セレクタ(selector)とは、タグ、クラス、IDのことを指す。
 - モダンブラウザとは、Firefox、Opera などのこと。
 
 *** IE6以下に適用(IE7とモダンブラウザには適用されない) [#pd930236]
 
  * html body {
  * html (selector) {
  
  }
 
 *** IE7のみに適用(IE7以外には適用されない) [#n730f417]
 
  *+html (selector) {
  
  }
 
 または、
 
  *:first-child+html (selector) {
  
  }
 
 *** 全てのIEに適用(IE以外には適用されない) [#c623c6de]
 
  *+html (selector), *html (selector) {
  
  }
 
 または、
 
  *:first-child+html (selector), *html (selector) {
  
  }
 
 *** IE7を含むモダンブラウザに適用(IE6以下には適用されない) [#b7ca9484]
 
  html>body (selector) {
  
  }
 
 *** IEを除くモダンブラウザに適用(IEには適用されない) [#oc37f9c2]
 
  html>/**/body (selector) {
  
  }
 
 *** よく使うパターン [#p3649bb6]
 
 div.sample クラスに上手くスタイルをあてる。
 
 #code(HTML){{
 <style type="text/css">
 /* IE以外に適用 */
 div.sample {
 	max-width:100%;
 	max-height:500px;
 	overflow:auto;
 	position:relative;
 }
 /* IE7に適用 */
 *:first-child+html div.sample {
 	width:650px;
 	height:180px;
 	overflow:auto;
 	position:relative;
 } 
 /* IE6以前に適用 */
 * html div.sample {
 	width:650px;
 	height:180px;
 	overflow:auto;
 	position:relative;
 }
 </style>
 }}
 
 より後に定義されたスタイルが優先されるという仕様を利用する。
 
 上記の場合、まずモダンブラウザ向けの設定をして、
 それ以降に、IEのみ設定を上書きさせている。
 
 
 *** 参考サイト [#p8189d25]
 - [[CSS hacks:http://www.webdevout.net/css-hacks]]
 - [[IE7 を含むモダンブラウザ向けの CSS ハックまとめ:http://www.lucky-bag.com/archives/2006/06/css-hacks.html]]
 
 
 ** IEのコンディショナル(条件付)コメント [#d56905dd]
 
 IEのみ、レンダリング対象として読み取られる記法がある。
 これを使えば、IE以外はコメントとして扱われて読み取られず、IEのみをターゲットにできる。
 
 *** 基本的な記法 [#xa8076d1]
 
  <!--[if (expression)]>
  
  <![endif]-->
 
 上記コメントにはさまれた部分の記述は、IEのみ読み取られる。
 
 expression は、その記述を読み取る条件。
 
 次のように書く。
 
  [comparison] [feature] [version]
 
 - comparison : ブラウザの種類。今のところ"IE"しか対応していない。
 - feature : ブラウザの種類。lt,gt,lte,gte, のいずれかを指定。
 - comparison : 適用範囲。lt,gt,lte,gte, のいずれかを指定。
 -- lt : 指定バージョンより下（指定バージョンは含まない）。
 -- gt : 指定バージョンより上（指定バージョンは含まない）。
 -- lte : 指定バージョン以下（指定バージョンを含む）。
 -- gte : 指定バージョン以上（指定バージョンを含む）。
 - feature : ブラウザの種類。今のところ"IE"しか対応していない。
 - version : ブラウザのバージョン。&br;
 コンディショナルコメントに対応しているのは 5, 5.5, 6, 7 (or 8)
 
 *** IE7以上に適用 [#o6f9fb1e]
 
  <!--[if gte 7]>
  <!--[if gte IE 7]>
  
  <![endif]-->
 
 *** IE6以上に適用 [#fc83b083]
 
  <!--[if gte 6]>
  <!--[if gte IE 6]>
  
  <![endif]-->
 
 *** IE6以下に適用 [#nc2e7e91]
 
  <!--[if lte 6]>
  <!--[if lte IE 6]>
  
  <![endif]-->
 
 *** IE5.5以下に適用 [#a2620884]
 
  <!--[if lt 6]>
  <!--[if lt IE 6]>
  
  <![endif]-->
 
 *** 全てのIEに適用 [#tbbbf8c4]
 
  <!--[if IE]>
  
  <![endif]-->
 
 *** 参考サイト [#pe7b43d0]
 - [[正式版完全対応! Internet Explorer 7 CSS攻略法:http://journal.mycom.co.jp/special/2007/ie7/017.html]]
 - [[About Conditional Comments:http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp]]
 - [[Cascading Style Sheet Compatibility in Internet Explorer 7:http://msdn2.microsoft.com/en-us/library/bb250496.aspx]]
 
 -----
 [[MLEXP. Wiki]]
 
 #googleads(1,1)
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS