<style>
a img{
padding:1px;
}
a.user img{
border:3px solid #efefef;
}
a.user:hover img{border:3px solid #999;}
</style>
<body>
<a class="user" href="#">
<img src="test.jpg"/>
</a>
</body>
代碼的具體實現可查看源代碼,下面只是重點指出hack的方法:
a.user img{
border:3px solid #efefef;
}
a.user:hover{zoom:1;}
a.user:hover img{border:3px solid #999;}
如果我把上面的zoom:1;換成了border:none,你可能就不是這么容易發現這句hack了,你會認為這是一個多余的CSS定義,而恰恰相反,只要我們增加這么一句定義,而里面的屬性只要跟下面一句定義不相同即可實現IE6下的兼容,是不是很簡單。
這樣寫下來代碼也簡潔多了,更重要的是邊框的樣式可以根據圖的大小自適應了。
新聞熱點
疑難解答