文章归档友情连接照片地图

鼠标经过时按钮链接变换图片

分类:前端技术  作者:rming  时间:2011-03-05

鼠标经过的说话就会切换一个背景图片,一般用在导航按钮,把切换的按钮做的漂亮一点,或者是中英文的切换,或者是色彩饱和度的变化,给网页带来一点生机!

<a href="#"><img src="img/nav__1.png" onmouseover = "this.src='img/nav_1.png'; " onmouseout="this.src='img/nav__1.png'"  /></a>

\令 css兼容性调试的时候

SS类级别的hack仅IE7识别 *+html {…}

IE6及IE6以下识别 * html {…}

opera、safari、chrome识别:

@media all and (min-width: 0px){…} //Firefox3.0.6不识别,但Firefox3.6也识别该规则,如果Firefox版本有严格要求,请使用下一条规则

@media screen and (-webkit-min-device-pixel-ratio:0){…} //IE、Firefox不识别该规则

仅opera识别:

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

CSS属性级别的hack仅IE识别 : margin-left:10px9;

仅IE8识别 : margin-left:10px;

IE6/IE7识别 : *margin-left:10px;

仅IE6识别 : _margin-left:10px;

li 的css hack

.article li{
list-style: inside url(../img/li.png);
width:460px;
height:31px;
}
.article a{
text-decoration:none;
color:#633;
}
.article a:hover{
color:#F00;
}

list-style的定义是display为list-item 的元素才能使用的,而使用了float属性之后,display默认属性值不再是list-item ,所以使用了list-style后又使用float就会造成list-style的设置的属性值没有起到效果。

由此可见,在IE6与IE7,是没法容忍它们俩相存的。也就是说使用它俩组合设计得到的理想效果在IE的一些版本不能实现,但是这个效果是非常重要的,且IE的使用群体占据了绝大部分。那么另外一种替代的方法就该出现了...

那就是background属性...

举个例子:

li {
list-style: inside url(../img/list1.png);
float:left;
}
可以替换为
li {
background:url(../img/list1.png) no-repeat;
float:left;
}
这样所以浏览器都可以显示效果了!


  1. Rming Rming

    hello 测试啊

提交评论