wp.aiziro.com

Windows IEの独自拡張プロパティ
A.親（もしくは祖先）によって大きさ・位置が決められている
B.要素自身が大きさ・位置を決めている
どちらかを示しているプロパティ。デフォルトはhaslayout = false (A)。

haslayout = trueにするには

.clearfix{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
display:inline-block;
}
/* Hide from IE-mac \*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/* End Hide from IE-mac */

IE6の設定
[ インターネットオプション ] → [ インターネット一時ファイル ] → [ 設定 ] 内
「保存しているページの新しいバージョンの確認」が「保存しているページの新しいバージョンの確認」になってるとキャッシュを読み込まず、その度に画像を読み込みにいくため。

[ Measure ]

cssに以下を記述

html{
filter:expression(
document.execCommand("BackgroundImageCache", false,true)
);}

※filter以降は１行で記入する。

※IE7では解消済み。

tableにcssでborder-collapse:collapse;を設定した場合、ボーダー幅の1/2づつ左右にはみ出る。
ボーダー幅が1pxの場合、ブラウザは左右0.5pxのはみ出しを巧くレンダリングできずにtableを1px左右にずらす。以下各ブラウザの挙動。

Win : IE → tableの内側に表示（見た目はテキ）

Win : Opera → tableの内側に表示（見た目はテキ）

Win : Firefox → 左に1px

Mac : Firefox → 左に1px

Mac : Safari → 右に1px

ハックで対処か。

※border-collapse:separate;（デフォルト）の場合、セルが空だとIEではボーダーが表示されない。

子要素にfloatを指定すると、親要素の背景が消える（IE6は消えない。やっぱりバグ）のは、floatが”浮いて”右寄せ左寄せされるから、親要素の高さを失うというカラクリ。

[ oh! ]

対処法はいつくかアリ。

1. 親要素に高さを指定する。
※中にテキストがある場合は高さの指定が難しい。

2. 親ボックスの次要素にclear指定

div.floated:after{/*floated = parent*/
content:"";
display:block;
clear:both;
}

※IE6は:afterもcontentも未対応。でもバグのおかけで結果は一緒。
3. 親ボックスにoverflow:auto;を指定。

div.floated{
width:000px;
background:#666666;
overflow:auto;
}

※MacIEではoverflowがvisible以外だとスクロールバーが出るらしい（テストしたら出なかった!?）。
なのでMacIE用に以下を記述して上書き。

/*\*//*/
*html div.floated{overflow: visible;}
/**/

*html div#idname{ /*star huck*/
background:url();/*For no IE. Remove background PNG image.*/　　filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='path',sizingMethod='scale'
);/*In Actual, Do not insert the line feed.*/
height:100%;
}

[ sizingMethodプロパティ ]

scale = 要素に合わせて画像を拡大・縮小
image = 要素を画像のサイズに合わせる
crop = そのまま

※AlphaImageLoader内のsrcはHTMLファイルからのパスとして適用される

■ブロックレベル要素に適用できる (=brなどインライン要素に適用するのはダメ）。

■clear適用のボックスにはmargin-topを指定しない。
→ clear は、「float を解除する」ために、ボックスの上マージンを増やして、フロート要素の外下辺より clear したボックスのボーダー上辺が下にくるよう調整するから

text-align : justify はIE6では対応していない。
なので、独自プロパティを使用する。


text-align : justify ;
text-justify : inter-ideograph ;


[ html ]

<div id="wrapper">
         <div id="space"></div>
</div>
<div id="footer">
         …
</div>

[ CSS ]

*{
margin: 0;
}
html, body{
height: 100%;
}
#wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px;
}
#footer, #space {
height: 100px; /* #space must be the same height as #footer */
}

リストのマーカーの位置がブラウザごとに解釈が異なる。
IE → マーカーはul要素（+li要素）の外側
Mozilla系 → マーカーはul要素の内側

[ Measure ]

↓マーカーなしで位置を揃える場合
ul{
margin : 0px;
padding : 0px;
list-style-type : none;
}

↓マーカーありで位置を揃える場合
ul{
margin : 0px 0px 0px 1em;
padding : 0px;
}

[ IE5.x ]
A. margin-left/right:auto; でのセンタリング不可。
→ 専用cssで、body{text-align:center;} container{text-align:left;} で処理。
B. widthの調整。
→ widthはborder,padding,marginをプラスした値に変更。別CSSで対応。

[ IE6 ]
A. Doctypeの確認。標準か互換か。
B. 外部cssの@charsetの確認。
C. imgのみのブロック要素（liタグナビ、画像テキストなど）のline-height
→ line-height:0（非推奨か）もしくはdisplay:block等で対応。

現状まとめ。

[ IE6以下に適用 ]
*html body{…}

[ IE7のみに適用 ]
*+html body{…}

[ IE全バージョンに適用 ]
*+html body,*html body{…}

[ IE7を含むモダンブラウザに適用（IE6以下を除外) ]
html> body{…}

[ IE7を除くモダンブラウザに適用 ]
html>/**/body{…}

さらに下位バージョン用
[ IE4,NN4のみを選別 ]
<link rel="stylesheet" href="css/version4.css" type="text/css" />
<link rel="stylesheet" href="css/import.css" type="text/css" media="screen,print" />
さらにimport.css内で頭に
@import "common.css";

→ version4.cssがIE4&NN4用。import.cssの読み込みでは、media="screen,print" でNN4をはじき、import.css内の@importでIE4をはじく。
その他はcommon.cssに記述。

[ IE5/5.5のみを選別 ]
import.css内の頭に
@media tty{
i{content:"\";/*" "*/}} @import ‘ie5win.css’; /*";}
}/* */
※ie5win.cssにIE5/5.5用のcssを記述。

[ cssハックを使わず各バージョンのIEを選別するには ]
<!–[if IE]>
<link rel="stylesheet" type="text/css" href="for_ie.css" />
<![endif]–>

IE5.0にのみ読み込ませるなら、
<!–[if IE 5.0]>
<link rel="stylesheet" type="text/css" href="for_ie5.css" />
<![endif]–>

h1要素、p要素、div要素などブロック内に画像だけを入れた状態にすると画像の下にすき間ができる問題。

[ Measure ]
1. img{ vertical-align : bottom; }
2. img{ display : block; }

※IEではhタグのline-heightも影響する。

Opera7 → @charset="shift_jis"（文字コード指定）があると外部cssを読み込まず無効な状態で表示される

Netscape6 → @charset="shift_jis"（文字コード指定）がないと、和文フォント指定が効かない

Mac IE5.x → 文字コード指定がUnicode(UTF-8ではない）だと読み込んでも反映されない

[ Measure ]
基本的に外部cssには@charset="shift_jis"を指定する(Opera7は無視)。MacIE5.xにだけ別CSSを読み込ませたいときには、Unicode保存を基本にしてMacIE5.x用CSSのみshift_jis保存する。

[ A. インラインの場合 ]
<p>やdisplay:blockを指定した<a>などで、heightと同じだけline-heightを指定する。

[ sample ]
ul.navi a{
display:block;
height:30px;
line-height:30px;
}

[ B. ブロックの場合 ]
1.センタリングしたいブロック要素の半分の高さを計算して
2.マイナス方向へのマージンで解決

[ sample ]
#child {
position: absolute;
top: 50%;/*親要素のheight/2*/
left: 50%;/*親要素のwidth/2*/
height:200px;
width:300px;
margin-top: -100px; /*センタリングするblockのheight/2量のマイナスマージン*/
margin-left: -150px; /*センタリングするblockのwidth/2量のマイナスマージン*/
background-color: #FFFFFF;
}
#parent{
position: relative;/*センタリングの基準boxにする*/
margin: 0px;
padding: 0px;
width: 500px;
height: 500px;
}

[ 動作確認 ]
OK → Firefox,IE6,NN7,Safari1.2,Opera7,MacIE5.2(height:100%はバグる)
NG → NN4.7

a:link{
color:#FF6600;
}
a:visited{color:#FF6600;
}
a:hover{color:#FF6600;
}
a:active{color:#FF6600;
}
の順序で記述。 &rarr; 後から記述されたものが優先。かつ、擬似クラスが動的擬似クラス(:hover,:active)にも関与するため。 

[ oh! 1 ]
dt{width:dtの幅; float:left; clear:left}
dd{width:dd全体の幅; float:left; margin-left:0}
※これだとMacIEでは表示が狂うので、
∨
dt{
width:dtの幅;
float:left;
clear:both;
/*これ以降はMacIEのみ\*//*/
clear:left;
/**/
}
dd{
width:dd全体の幅;
float:left;
margin-right: 00px;
/*これ以降はMacIEのみ\*//*/
clear:left;
/**/
}
[ oh! 2 ]
上は

これは、複数のレンダリングモードがあるブラウザのときの注意点。
Full Standardモード（HTML4.01Strict＆XHTML）のきに起こる。
table（のtd）に画像を隙間なくしきつめようとしても、画像の下に隙間が出来る。これは、画像はインライン置換要素であるため、画像の下端がテキス トのベースラインに揃うのが原因。ベースライン以下の部分も含めてブロッ クボックスを生成するために隙間が出来る。（MacIE5.2では隙間はできない）

[ Measure ]
td img{vertical-align:bottom}