Home > CSS > Jvascript > php > flash > cgi > MySql> Wp> M_formats> T_Design> Parts> Art> Hack> Profile> Renewal> Site Map> Verification

★備忘録→ 01IE5.5 > 02IE6 > 03IE7 > 04IE8 > 05MacIE4/5 > 06fox > 07Safari > 08Opera END

０１Hack（Windows Internet Explorer/IE5.5）

スターハック（win4～6、 Mac 4～5）

Windows IE 4～6、Mac IE 4～5のみにスタイルを適用する場合に用いる。 スターつまり*を利用することからこのネーミングになったものと思われる。 利用法としては、適用したいセレクタの前に「* html」を付ける。 書式上は正しいのでCSS Validatorに通るが、それにマッチする要素はHTML文書には出現し得ない。 


* html p { color:#FF0000; }

▲Ｔｏｐ

スター７ハック---（win 5.5～6、Mac 5　Safari）

Windows IE 5.5～6、Mac IE 5、Safariのみにスタイルを適用する。適用したいセレクタの前に「html*」 を付けるのだが、空白を含めないように注意したい。書式としては不正で、CSS Validatorに通らない。 

html*p { color:#FF0000; }

▲Ｔｏｐ

ハッシュハック（すべてのIEにのみ）

ハッシュハック（Hash Hack）は、すべてのIEにのみスタイルを適用させます。 CSS Validatorに通らないため、他のハックで代用することをオススメします。 


selector{
 /*通常*/
  propaty:value;
 /*IEのみ*/
  #propaty:value;
}

▲Ｔｏｐ

アンダースコアハック（win 4～6）

Windows IE 4～6のみにスタイルを適用する場合に用いる。適用したいプロパティの前に 「_（アンダースコア）」を付けるだけだが、CSSの書式としては不正で、CSS Validatorに通らない。 


.hoge {   
    border-top:1px solid #CCC;   
    margin:1px 10px 20px 0;   
    _margin-top:0;   
}  
などのように、記述すればIEだけmargin-topが0になります。
IEには、互換モードの時に、

“ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう”

▲Ｔｏｐ

パスフィルターとは

パスフィルターとは、指定したブラウザにのみCSSを適用する方法です。 ブラウザ毎に読み込ませることができるので、特定ブラウザ専用の外部スタイルシートを作成します。 


●Win IE5-5.5 のみに適用
@media tty {
    i {content : "\";/*" "*/}} @import 'win-ie5-55.css'; /*";}
    }/* */Win IE5 のみに適用
@media tty {
    i {content : "\";/*" "*/}}; @import 'win-ie5.css'; {;}/*";}
    }/* */Win IE5.5 のみに適用
@media tty {
    i {content : "\";/*" "*/}}@m; @import 'win-ie5.5.css'; /*";}
    }/* */Mac IE5 のみに適用
/*\*//*/
    @import "mac-ie5.css";
    /**/
●モダンブラウザ のみに適用（Trantek’s High Pass Filter）
@import "null?\"\{";
@import "modan.css";
@import "null?\"\}";

ここでいう、モダンブラウザとは、Windows IE6、Windows IE7、Mac IE5、Mozilla、Firefox、Opera6-9、Safariを指します。 古いブラウザをすべて排除できるので、とても便利なパスフィルターです。

▲Ｔｏｐ

ＣＳＳ使用例


body {
    color: red; /* all browsers, of course */
    color: green\9; /* IE8 and below */
    *color: yellow; /* IE7 and below */
    _color: orange; /* IE6 */
}

body:not(:target) {
    color: black\9; /* IE9 */
}

@media tty {
  i{content:"\";/*" "*/}}; @import 'win-ie50.css'; {;}/*";}
}/* */


★chap05_p181_choco-mint_ie5win.css

@charset "UTF-8";

* html body {
     border-top: 0; 
     text-align: center;
     line-height: 1.4;
}

* html #header-inner,
* html #global-nav ul,
* html #lead,
* html #wrapper {
     text-align: left;
}

* html #global-nav ul li a,
* html #content .highlight p.date,
* html #content .highlight p.date em img,
* html #aside h2 {
      font-size: small;
}
* html #content .highlight h2 {
      font-size: large;
}

* html #header ul#navskip,
* html #global-nav h2,
* html #footer h2 {
      position: absolute;
      left: -9999px;
}

* html #header {
      border-top: 0.5em solid #630;
      height: 6em;
}

* html #content .highlight {
      width: 38em;
}

* html #aside {
      width: 19em;
}

* html #footer ul {
      padding-top: 1.5em;
      margin-left: 0;
}

* html #global-nav ul {
      margin-left: 0;
}

▲Ｔｏｐ