ブラウザ互換性の問題と解決
4262 ワード
1 ie6.0 margin
： 、float、 margin。
：display：inline；
2 ie6.0
：overflow:hidden; font-size:0; line-height：xx px；
3 img ( ： 。)
: 。
4 ， ， float， 。
：a {<div style="height:0;clear:both;"> </div>}
b {overflow：hidden；}
c
5 Ie6 ， 、 ， min-width/height Max-width/height ie6 ，
：(1)：.abc{border:1px blue solid;width:200px;height:200px;}
html>body .abc{width:auto;height:auto;min-width:200px;min-height:200px;}
(2)：.abc{width:200px;height:200px;_width:200px;_height:200px;}（ ie6 ， ， ， 。）
6 Ie6 ： li 、 ， li ， li
：li 、 li
7 li
：li vertical-align:middle;
8 3 ：ie6 ， ， 。
： hack ， ： height:100px;
ie6 _height:100px;
ie7 *+height:100px;
ie6/ie7 *height:100px;
9 ， ， 。
： {zoom：1；}
10 HTML ， 100%， 。
： display:inline;。
11 opacity
filter：alpha（opacity=80）；/*ie */
opacity：0.8；/* css3 */
12 ， margin ， ， margin 。
13 ： !important css (.abc{color:red !important;})。 ie6 !important bug: css ，!important 。
14 background-position-y background-position-x;
--------------------------- -------------------------------
15 ie6 fixed
/* IE6 */
#top{
position:fixed;
bottom:0;
right:20px;
}
/* IE6 fixed ， */
#top{
position:fixed;
_position:absolute;
top:0;
right:20px;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}
/* hack IE6 ， ， */
*html{
background-image:url(about:blank);
background-attachment:fixed;
}
/* */
#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}
/* */
#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop)||0)-(parseInt(this.currentStyle.marginBottom)||0)));
}
/* */
#top{
position:fixed;
top:50%;
margin-top:-50px;
_position:absolute;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2));
}
16 ie6 、 hack
/* */
.min_width{
min-width:300px;
_width:expression(parseInt(this.clientWidth) < 300 ? "300px" : this.clientWidth);
}
/* */
.max_width{
max-width:600px;
_width:expression(parseInt(this.clientWidth) > 600 ? "600px" : this.clientWidth);
}
/* */
.min_height{
min-height:200px;
_height:expression(parseInt(this.clientHeight) < 200 ? "200px" : this.clientHeight);
}
/* */
.max_height{
max-height:400px;
_height:expression(parseInt(this.clientHeight) > 400 ? "400px" : this.clientHeight);
}
17 z-index bug
1）ie6 z-index 。 ：1、 position relative；2、 (float) 。
2） ：
， 。 ：
position relative absolute ， absolute 。 IE6 ， z-index ， z-index 。
18 ie hack
/* hack：*/
.header {_width:100px;} /* IE6 */
.header {*+width:100px;} /* IE7 */
.header {*width:100px;} /* IE6、IE7 */
.header {width:100px\0;} /* IE8、IE9 */
.header {width:100px\9;} /* IE6、IE7、IE8、IE9 */
.header {width:330px\9\0;} /* IE9 */
/* Hack：*/
*html .header{} /*IE6*/
*+html .header{} /*IE7*/