CSS实用技巧及常见问题
IE6背景图片缓存bug解决方法:背景图片缓存bug是IE6众多常见bug之一
a.方法一:使用Javascript脚本【推荐】
<script type="text/javascript"><!--
document.execCommand("BackgroundImageCache", false, true);
// --></script>
<![endif]-->
b.方法二:使用CSS表达式
{
filter:expression(document.execCommand("BackgroundImageCache", false, true));
}
IE6一直是前端工作者的痛。如果你在定义某个层中的图片最大宽度时,你会发现,MAX-WIDTH和MIN-HEIGHT对IE6是无效的。
#div img{
max-width:600px;
min-width:600px;
_width:expression((documentElement.clientWidth >600) ? "600px" : "auto" ); /*定义IE6最大宽度*/
_width:expression((documentElement.clientWidth <600) ? "600px" : "auto" ); /*定义IE6最小宽度*/
}
HTML中的注释如果写到了CSS中,会将注释下所有的CSS失效,比如:
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;
}
按钮按下时立体感效果:
加入收藏代码:
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:
display:-moz-inline-stack;/* 专属FF也可以用-moz-inline-box定义 */
*display:inline;
zoom:1;/* 上一行和此行用于激活IE6/7的layout,实现类似效果 */
}
透明度滤镜的用法:
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;