a:hoverで背景を設定したらIEでバグが発生したのでメモ

2008/04/15

カテゴリ：: CSS

タグ：: IE; バグ; Hover

a:hoverのバグ

久々に、なんだこれ！？っていうバグにぶちあったった。
グローバルナビゲーションに:hoverを設定したところ、
なぜかその下に設定していたイメージも動いた・・・
しかもIEだけ･･･なぜなんだ！？
ってことで自分の解決策のメモ代わりに書いておく。

バグが発生したときのソース

◎ HTML

<!-- ●wrap -->
<div id="wrap">
    <!-- ●header -->
    <div id="header">
        <h1>ろご</h1>
        <p>せつめいぶぶん</p>
        <ul>
            <li><a href="#">ほーむ</a></li>
            <li><a href="#">なび</a></li>
            <li><a href="#">なび</a></li>
            <li><a href="#">なび</a></li>
            <li><a href="#">なび</a></li>
            <li class="last-child"><a href="#">なび</a></li>
        </ul>
    </div>
    <!-- ■/header -->
    
    <!-- ●header-img -->
    <div id="header-img">
        <img src="#" width="800" height="182" alt="#" />
    </div>
    <!-- ■/header-img -->
    
・・・以下略

◎ CSS

/*	wrap
------------------------------------*/
#wrap{
    width: 800px;
    margin: 0 auto;
    text-align: center;
}
/*	header
------------------------------------*/
#header {
    margin: 20px 0 0 0;
}
#header:after {
    content: ""; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}	
    
    #header h1 {
        float: left;
        margin: 30px 0 0 0;
    }
    
    #header ul {
        clear: both;
        padding: 20px 0 0 0;
    }
    #header ul li {	
        display: inline;
        float: left;
    }
    #header ul li a {
        text-align: left;
        float: left;
        width: 158px;
        margin: 0;
        padding: 20px 0 20px 5px;
        border-top: 2px solid #999;
        border-bottom: 2px solid #999;
        border-left: 2px solid #999;
        background-color: #fce2eb;
    }
    #header ul li a:hover{
        background-color: #ff0000;
    }
        #header ul li.last-child a{
            border-right: 2px solid #999;
        }
/*	header-img 
------------------------------------*/
#header-img {
    clear: both;
    margin: 20px 0 30px;
}