IE 6でのCSSとHTMLの注意事項
3901 ワード
1、画像について
IE 6は8ビットのPNG透明ピクチャしかサポートしていないので、すべての透明ピクチャをGIF形式に変換して正常に表示する必要があります.
2,float以降のmargin-left二倍問題について
すべてのfloat:leftの後に、
display:inline;
3,float以降、枠を広げる方法
floatレイヤの親レイヤに、以下を追加します.
#main-body:after {
content: "";
height: 0;
display: block;
clear: both;
}
上記の方法が無効であればfloatの層の最後にDIV層を1つ追加する
例:
4,padding-left and margin-left感覚が失効する問題
使用する前に、親で定義する必要があります.
text-align:left;
同様にpadding-rightを使用する場合は、親レイヤにも定義を付けないでください.
text-align:right;
5,javascript:void(0)について
ajaxと書くと見積もって、今では多くの人がこれを使っていますが、IE 6では、aラベルのhref属性にjavascript:void(0)を使うと、一定のバグが発生します.
例えばgif形式の動的画像が突然反応しなくなった
解決方法:aラベルとjavascript:の混合使用を避ける.たとえば、spanタグとcssコードでハイパーリンクを偽装できます.
view plain
copy to clipboard
print
?
a-link-span {
color: #8d9393;/*定義されたハイパーリンクカラー*/を使用
cursor: pointer;/*マウスはレイヤーを通って小さな手になります*/}
6.DIVの高度失効問題
IE 6のデフォルトのフォント表示サイズが12-14 pxの間にあるため、DIVの高さがこの値より小さい場合、IE 6は自業自得に数値を===+に大きくする.
解決策はfontの値を追加することです.
font-size: 0px;
7.font-size:13 px失効問題
IE 6はこれを認識できず、解決策はfont-size:9 ptに変更する
8.min-heightの質問
IE 6はmin-heightを認識できないが、高さがheight値を超えると自動的に高くなる.解決策は.なお、min-heightを設定すると親層のoverflowはhiddenに設定できません
min-height: 300px;
height: auto !important;
height: 300px;
9.li左の小さな丸い点が取れないことがある
IE 6で、list-styleを徹底的に取り除くには:
list-style: none outside none;
10.position fixが失効した問題
IE 6のやり方は:
postion:absolute;
bottom:auto;
top:expression(eval(document.documentElement.scrollTop));
11.input同じsizeでtextとpassword幅が異なる問題
これはフォントの問題によるもので、解決方法:
input{font-family:'Verdana';}
12.:hover失効問題
IE 6では、aのみサポート:hover.できるだけ他のラベル内でhoverを使うのを避けて、必ず使うならば、動的にclassを修正して実現します
13.position:absolute絶対位置決めオフセットの問題
この問題最近頭が痛くてたまらない…ORZ
注意すべき点は、absoluteの親レイヤがrelativeとして定義されていることです.もう1つはleftを0に定義することです.IE 6とIE 7の下で、絶対位置は上/下、左/右を定義します.
14.floatのレイヤに別の行の問題が発生します.
この問題も私を泣かせた......ORZ、特にfloat:rightを使うとき.
解決方法1:float:rightの層を前に置くが、これは時々語意に影響し、私はコードに潔癖で、この方法が好きではない==
解決方法2:float:rightの前の層をfloat:leftに設定します.しかし,これでは親層を広げる方法を考慮し,コード量も多い.とにかく葛藤===です.
IE 6は8ビットのPNG透明ピクチャしかサポートしていないので、すべての透明ピクチャをGIF形式に変換して正常に表示する必要があります.
2,float以降のmargin-left二倍問題について
すべてのfloat:leftの後に、
display:inline;
3,float以降、枠を広げる方法
floatレイヤの親レイヤに、以下を追加します.
#main-body:after {
content: "";
height: 0;
display: block;
clear: both;
}
上記の方法が無効であればfloatの層の最後にDIV層を1つ追加する
例:
<div class="float-father">
<div class="float-left">......</div>
<div class="float-left">......</div>
<div style="clear:both"></div>
</div>4,padding-left and margin-left感覚が失効する問題
使用する前に、親で定義する必要があります.
text-align:left;
同様にpadding-rightを使用する場合は、親レイヤにも定義を付けないでください.
text-align:right;
5,javascript:void(0)について
ajaxと書くと見積もって、今では多くの人がこれを使っていますが、IE 6では、aラベルのhref属性にjavascript:void(0)を使うと、一定のバグが発生します.
例えばgif形式の動的画像が突然反応しなくなった
解決方法:aラベルとjavascript:の混合使用を避ける.たとえば、spanタグとcssコードでハイパーリンクを偽装できます.
view plain
copy to clipboard
?
a-link-span {
color: #8d9393;/*定義されたハイパーリンクカラー*/を使用
cursor: pointer;/*マウスはレイヤーを通って小さな手になります*/}
6.DIVの高度失効問題
IE 6のデフォルトのフォント表示サイズが12-14 pxの間にあるため、DIVの高さがこの値より小さい場合、IE 6は自業自得に数値を===+に大きくする.
解決策はfontの値を追加することです.
font-size: 0px;
7.font-size:13 px失効問題
IE 6はこれを認識できず、解決策はfont-size:9 ptに変更する
8.min-heightの質問
IE 6はmin-heightを認識できないが、高さがheight値を超えると自動的に高くなる.解決策は.なお、min-heightを設定すると親層のoverflowはhiddenに設定できません
min-height: 300px;
height: auto !important;
height: 300px;
9.li左の小さな丸い点が取れないことがある
IE 6で、list-styleを徹底的に取り除くには:
list-style: none outside none;
10.position fixが失効した問題
IE 6のやり方は:
postion:absolute;
bottom:auto;
top:expression(eval(document.documentElement.scrollTop));
11.input同じsizeでtextとpassword幅が異なる問題
これはフォントの問題によるもので、解決方法:
input{font-family:'Verdana';}
12.:hover失効問題
IE 6では、aのみサポート:hover.できるだけ他のラベル内でhoverを使うのを避けて、必ず使うならば、動的にclassを修正して実現します
13.position:absolute絶対位置決めオフセットの問題
この問題最近頭が痛くてたまらない…ORZ
注意すべき点は、absoluteの親レイヤがrelativeとして定義されていることです.もう1つはleftを0に定義することです.IE 6とIE 7の下で、絶対位置は上/下、左/右を定義します.
14.floatのレイヤに別の行の問題が発生します.
この問題も私を泣かせた......ORZ、特にfloat:rightを使うとき.
解決方法1:float:rightの層を前に置くが、これは時々語意に影響し、私はコードに潔癖で、この方法が好きではない==
解決方法2:float:rightの前の層をfloat:leftに設定します.しかし,これでは親層を広げる方法を考慮し,コード量も多い.とにかく葛藤===です.