css中的一些技巧

来源：互联网发布：淘宝论文发表可靠吗编辑：程序博客网时间：2024/05/16 14:15

1、在IE6浏览器下使用CSS滤镜使PNG24背景图片实现半透明效果

.ooxx{

background-image:url(../images/a.png);

_background:none;

_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src=”images/a.png” );

}

2、CSS hack

#test{

color:red; /*所有浏览器都支持*/

_color:red; /*IE6支持*/

*color:red; /*IE6、IE7支持*/

*+color:red; /*IE7支持*/

color:red\9; /*IE6、IE7、IE8支持*/

color:red\0; /*IE8支持*/

}

#element {
color:orange;
}
#element {
*color: white; /* IE6+7, doesn’t work in IE8/9 as IE7 */
}
#element {
_color: red; /* IE6 */
}
#element {
color: green\0/IE8+9; /* IE8+9 */
}
:root #element { color:pink \0/IE9; } /* IE9 */

CSS Hack：单独针对Firefox

把针对Firefox的CSS代码写在下面CSS函数的大括号之间

@-moz-document url-prefix(){ /*CSS代码*/ }，如：

@-moz-document url-prefix(){

#main {background: red; }

}

*这样id号为“main”的Html元素只有在Firefox中才会显示出“background: red”的效果。

CSS Hack：单独针对Opera

把针对Opera的CSS代码写在下面CSS函数的大括号之间

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){/*CSS代码*/ }，如：

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){

#content {background: url(http://guandian.co/logo.jpg) no-repeat center top;}

}

*这样id号为“content”的Html元素只有在Opera中才会显示出“background: url(http://guandian.co/logo.jpg) no-repeat center top”的效果。

CSS Hack8：针对Safari和Google Chrome

把针对Safari和Google Chrome的CSS代码写在下面CSS函数的大括号之间

@media screen and (-webkit-min-device-pixel-ratio:0){/*CSS代码*/ }，如：

@media screen and (-webkit-min-device-pixel-ratio:0){

#picture {background: url(http://guandian.co/mypic.gif) no-repeat center top;}

}

3、半透明全屏遮罩层样式

#mask{position: fixed;z-index:100;top: 0px;left: 0px;height:100%;width:100%;background-color:#000;-moz-opacity:0.2;opacity:.20;filter:alpha(opacity=20);

_position:absolute;_height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + ‘px’);}

4、CSS清浮动

.ooxx{zoom:1;}

.ooxx:after{content:”";display:block;height:0;clear:both;}

5、CSS兼容标准浏览器的圆角

.ooxx{ border:1px solid #AEAEAE; -moz-border-radius:5px; -khtml-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}

6、让IE8用IE7的模式来渲染CSS

只用在head部分加上以下代码

7、解决IE6背景图片缓存的BUG

<!–[if IE 6]>

// <![CDATA[

document.execCommand("BackgroundImageCache", false, true);

// ]]>

</script>

<![endif]–>

8、IE下让网站变成黑白的

html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}

9、图片垂直居中（方法一）

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=GB2312″ />
<title>无标题文档</title>
<style type=”text/css”>
.psdthumb { height: 1%; overflow: hidden; display:table; border-spacing:10px; }
.psdthumb li {border:1px solid #aaa; width:240px; height:160px; text-align:center; vertical-align:middle; position:relative; margin: 10px; *float:left; display: table-cell; }
.psdthumb .qq { *position:absolute; top:50%; }
.psdthumb .qq img { *position:relative; top:-50%; left:-50%; }
</style>
</head>

10、让IE6也完美实现position:fixed

/* 除IE6浏览器的通用方法 */
.ie6fixedTL{position:fixed;left:0;top:0}
.ie6fixedBR{position:fixed;right:0;bottom:0}
/* IE6浏览器的特有方法 */
/* 修正IE6振动bug */
* html,* html body{background-image:url(about:blank);background-attachment:fixed}
* html .ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}
* html .ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}

例： .mod_back_top{ width:60px; height:55px; background:url(../img/theme_a/back_top.png) no-repeat;position:fixed; _position:absolute; right:2px; bottom:2px; left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))｝