みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

IE9で画像のロールオーバーが上手く表示されない

CSSで一枚の画像のみを使用しロールオーバーをしてみたのですが、Google Chromeではなんとか再現できたものの、IE9で確認してみたところ、画像が全て同じ物(左上の画像)になっていました(マウスを乗せても変化なし)

初心者なので初歩的な部分でつまずいている可能性もあると思いますが、どうかよろしくお願いいたします

以下HTMLとCSSです
<body>
<ul id="globalnavi">
<li><a href="./info.html" target="main">info</a></li>
<li><a href="./main.html" target="main">main</a></li>
<li><a href="./blog.html" target="sub">blog</a></li>
<li><a href="./link.html" target="main">link</a></li>
<li><a href="./index.html" target="top">index</a></li>
</ul>
</body>

#globalnavi,#globalnavi li{
display:block;list-style:none;
margin: 0;padding: 0;
width: 96px;
}

#globalnavi li{
width: 96px;height: 79px;
display:inline-block;
position:relative;
}
#globalnavi a {
display: block;
text-indent: -9999px;
text-decoration: none;
width:100%;height:100%;
background: url(./img/1.png) no-repeat 0 0 ;
text-decoration: none;
}

#globalnavi a[href="./info.html"] { background-position: 0px 0px; }
#globalnavi a[href="./main.html"] { background-position: 0px -79px; }
#globalnavi a[href="./blog.html"] { background-position: 0px -158px; }
#globalnavi a[href="./link.html"] { background-position: 0px -237px; }
#globalnavi a[href="./index.html"] { background-position: 0px -316px; }

#globalnavi a[href="./info.html"]:hover,
#globalnavi a[href="./info.html"]:focus { background-position: -96px -0px; }
#globalnavi a[href="./main.html"]:hover,
#globalnavi a[href="./main.html"]:focus { background-position: -96px -79px; }
#globalnavi a[href="./blog.html"]:hover,
#globalnavi a[href="./blog.html"]:focus { background-position: -96px -158px; }
#globalnavi a[href="./link.html"]:hover,
#globalnavi a[href="./link.html"]:focus { background-position: -96px -237px; }
#globalnavi a[href="../index.html"]:hover,
#globalnavi a[href="./index.html"]:focus { background-position: -96px -316px; }

投稿日時 - 2012-12-29 15:27:56

QNo.7866782

困ってます

質問者が選んだベストアンサー

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<!DOCTYPE html>
<html lang="ja">

HTML4.01 , XHTML1.0 , HTML5 のいずれかで記述すると動作します。

CSS の文法については検証サイトで確認してください。
http://jigsaw.w3.org/css-validator/

投稿日時 - 2013-01-02 10:48:20

お礼

HTML5で記述したところうまく表示されました
詳細に教えてくださり、ありがとうございました

投稿日時 - 2013-01-04 23:21:32

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(2)

ANo.1

ひょっとして、DOCTYPE宣言していないとか?

1行めが、<html> なら動作しませんね。

投稿日時 - 2012-12-31 13:03:49

補足

回答有り難うございます
すみません、省略してしまいましたがDOCTYPE宣言はしてあります
記述的には問題ないのでしょうか?

投稿日時 - 2013-01-02 00:13:35

あなたにオススメの質問