解决 css3 属性兼容性问题
加前缀
div {
transform: translateY(-50%);
-ms-transform: translateY(-50%); /* IE 9 */
-moz-transform: translateY(-50%); /* Firefox */
-webkit-transform: translateY(-50%); /* Safari 和 Chrome */
-o-transform: translateY(-50%); /* Opera */
}
某些浏览器图片底部留白
img {
vertical-align: bottom;
}
ie6横向margin加倍
产生因素:块属性、float、有横向的margin
解决方法:display:inline
ie6下默认的行高
解决方法:overflow:hidden 、 flont-size:0 、 line-height:xx px
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));
}
解决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);
}
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*/
各个浏览器下的img有空隙
产生因素:回车
解决方法:让图片浮动
li之间有间距
解决方法:li设置vertical-align:middle
3px问题
产生因素:ie6下,当浮动元素与流动元素并排显示时,他们之间会存在3px问题
解决方法:用hack技术,例如:
height:100px; /*所有浏览器通用*/
_height:100px;/*ie6专用*/
*+height:100px;/*ie7专用*/
*height:100px;/*ie6/ie7共用*/
当定义行内元素为包含框时,且包含框包含的绝对定位元素以百分比为单位进行定位时,会出现混乱。
解决方法:在行内元素里加入{zoom:1;}
当多个浮动元素中间夹杂着HTML注释语句时,如果浮动元素宽度为100%,则在下一行多显示一个上一行最后一个字符。
解决办法:给浮动元素添加display:inline;
opacity 定义元素的不透明度
filter:alpha(opacity=80);/*ie支持该属性*/
opacity:0.8;/*支持css3的浏览器*/