CSS实用技巧及常见问题

IE6背景图片缓存bug解决方法：背景图片缓存bug是IE6众多常见bug之一

a.方法一：使用Javascript脚本【推荐】

<!--[if IE 6]>
<script type="text/javascript"><!--
document.execCommand("BackgroundImageCache", false, true);
// --></script>
<![endif]-->
b.方法二：使用CSS表达式 html {}
{
filter:e­xpression(document.execCommand("BackgroundImageCache", false, true));
}
IE6一直是前端工作者的痛。如果你在定义某个层中的图片最大宽度时，你会发现，MAX-WIDTH和MIN-HEIGHT对IE6是无效的。

#div img{
max-width:600px;
min-width:600px;
_width:e­xpression((documentElement.clientWidth >600) ? "600px" : "auto" ); /*定义IE6最大宽度*/
_width:e­xpression((documentElement.clientWidth <600) ? "600px" : "auto" ); /*定义IE6最小宽度*/
}

HTML中的注释如果写到了CSS中，会将注释下所有的CSS失效，比如：

.e_catatree{
height:21px;
color:#ccc;
text-align:right;
line-height:20px;
border-top:1px #ccc solid;
margin:0 20px;
}
<!-- 结束 -->
/*加入购物车后页面*/
#cartmain{
width:958px;
background:url(../img/bg_reg.gif) repeat-x top;
border-right:1px #e9e9e9 solid;
border-bottom:1px #e9e9e9 solid;
border-left:1px #e9e9e9 solid;
margin:5px 0;
}以上样式中，<!-- 结束 -->注释后的CSS是无效的。。

按钮按下时立体感效果:

a:hover { position:relative; top:1px; left:1px}/* 切记一定要是相对定位 */加入收藏代码:

<script>
function addfavorite()
{
if (document.all)
{
window.external.addFavorite('http://bbs.blueidea.com','经典论坛');
}
else if (window.sidebar)
{
window.sidebar.addPanel('经典论坛', 'http://bbs.blueidea.com', "");
}
}
</script>
<a href="#" onclick="addfavorite()">把经典论坛加入收藏</a>通过定义em实现小三角效果:

* {
font-size:14px;/* 必须通配字体大小 */
}
em {
display:block;
font:0/0 "宋体";/* 经本人摸索,只有在宋体下才最为标准 */
border:7px solid;/* border值越大,三角形越大 */
border-color:#fff #fff #fff #444;/* 通过改变颜色值,可产生不同效果,自己实验 */
margin-top:5px
}display之line-block的HACK:

.menu{
display:-moz-inline-stack;/* 专属FF也可以用-moz-inline-box定义 */
*display:inline;
zoom:1;/* 上一行和此行用于激活IE6/7的layout,实现类似效果 */
}
透明度滤镜的用法:
.navbg {
filter:alpha(opacity=40); /* IE */
-moz-opacity:0.4; /* Moz + FF */
opacity: 0.4; /* 支持CSS3的浏览器（FF 1.5也支持）*/
}

2.水平居中（仅限固定宽度）

这个我想大家都会知道的，如：

div#container {margin: 0 auto;}
3.充分利用position中的absolute和relatively

4.居中，还是居中（纵横通杀）

div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}
div.popup { margin-top: -200px; margin-left: -250px;}
Memo：

·必须指定width和height的固定值；

·position值为absolute；

·分别指定top与left为50%；

·设置margin-top和margin-left分别height和width的负值的一半，也可以简写为：margin:-200px 0 0 -250px;