ie6下用css来实现hover效果

转载于 2012-09-07 12:19:00 发布 · 124 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/playerlife/archive/2012/09/07/2674848.html

本文介绍了一种解决IE6浏览器下a:hover效果无法正常触发的问题的方法。通过为a:hover添加特定样式，如background-repeat属性设置为no-repeat，可以在不影响整体布局的情况下修复此bug。

<html>
    <head>
        <title>ie6下hover效果的实现</title>          
        <style>
        /*
            IE6中如果a与a:hover的css定义是一样的,也就是说如果a:hover中没有样式的改变，hover就不会被触发
            在a:hover中增加一些特定的属性，就可以修复此bug(随意增加,,只要不破坏你原来的页面布局即可,我用的是background-repeat)
        */
               
            * { margin:0;padding:0;}
            a {display:inline-block;padding:10px; line-height:20px;  margin:10px; border:1px solid gray;}
            a:hover { background:url('bg.png') red; background-repeat:no-repeat; /*add style to fixed ie6 hover bug*/}
        </style>
    <head/>
    <body>
            <br />
            <a href="#">链接1</a>
            <a href="#">链接2</a>
            <a href="#">链接3</a>
            <a href="#">链接4</a>
</body>
</html>

转载于:https://www.cnblogs.com/playerlife/archive/2012/09/07/2674848.html