THE HAM MEDIA BLOG

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

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
Hover
バグ
IE

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;
}

イメージにて表現

a:hoverのバグ

IEで起こるa:hoverのバグ

調べたらでてきたー!!

アンカーを:hover状態にすると親ブロックの高さが変化する

ってことで、なんとか修正させた。

修正したのは、ulのpaddingを0にして、
widthをつけたところで問題解決!
今回の事例は比較的簡単だったようだ。

以前にも一度この問題にぶちあたっていたけど、
まさかバグだったとは…

以後覚えておこっと。

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。