IEで、以下のようなレイアウトで、a:hoverを指定したところ、はみ出て表示される。

ie_ahover_bug.jpg

原因は、CSSにdisplay:inline-blockを指定していなかったために、
widthが無視されたため。

修正前は、以下のような記述をしていた。

/* 月例会写真 選択時 */
#mnth_r_photo ul li a:hover {
    border-bottom:#ff871b solid 2px;
    width:148px;
}

aタグは、inline要素のため、widthが効かない。
そのため、widthが無視されてしまったため、このような結果になった。

CSSを以下のように修正した。
/* 月例会写真 選択時 */
#mnth_r_photo ul li a:hover {
    border-bottom:#ff871b solid 2px;
    width:148px;
    display:inline-block;
}

inline-blockの解説については、以下を参照のこと。

www.mozilla.gr.jp/standards/webtips0015.html

スポンサーサイト

コメントの投稿

非公開コメント

プロフィール

e.swan

Author:e.swan
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR