※ ChatGPTを利用し、要約された質問です（原文：CSSでロールオーバーボタン。IEで表示されるようにするには？）
CSSでロールオーバーボタンの修正方法
このQ&Aのポイント
CSSで作成したロールオーバーボタンがFirefoxでは正常に表示されるが、IEでは機能しない場合の修正方法について教えてください。
IEでCSSで作成したロールオーバーボタンがうまく表示されない問題が発生しています。どのように修正すればよいでしょうか？
CSSで作成したロールオーバーボタンがFirefoxでは正常に表示されるのに対し、IEではロールオーバーが機能しない問題が発生しています。修正方法を教えてください。
CSSでロールオーバーボタン。IEで表示されるようにするには？
CSSでロールオーバーボタンを作っています。
Firefoxだと問題なく表示されるのですが、IEだとロールオーバーしてくれません。
どのように修正すればよいのでしょうか？
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>無題ドキュメント</title>
<style type="text/css">
<!--
body {
font-family: ＭＳ Ｐゴシック, Osaka, ヒラギノ角ゴ Pro W3;
color: #FFFFFF;
background-color: #c5003f;
background-image: url(../images/bg.jpg);
background-repeat: no-repeat;
margin:0;
padding:20px;
}
#fsize {
float:right;}
#fsize div {
margin:0;
}
#fsize a {
display:block;
background-repeat:no-repeat;
}
#fsize a img {
border:none;
}
#fsize_l {
background-image:url(../images/b_fsize_l_f2.jpg);
float:left;
}
#fsize_m {
background-image:url(../images/b_fsize_m_f2.jpg);
float:left;
}
#fsize_s {
background-image:url(../images/b_fsize_s_f2.jpg);
float:left;
}
#fsize a:hover {
background-color:#FFFFFF;
}
#fsize a:hover img {
visibility:hidden;
}
-->
</style></head>
<body>
<div id="fsize">
<div><a id="fsize_l" onclick="document.body.style.fontSize='large'"><img src="../images/b_fsize_l.jpg" alt="*" width="85" height="25" /></a></div>
<div><a id="fsize_m" onclick="document.body.style.fontSize='small'"><img src="../images/b_fsize_m.jpg" alt="*" width="19" height="25" /></a></div>
<div><a id="fsize_s" onclick="document.body.style.fontSize='x-small'"><img src="../images/b_fsize_s.jpg" alt="*" width="29" height="25" /></a></div>
</div>
</body>
</html>
お礼
ありがとうございます！ あんなに悩んでいたのに、一瞬で！しかも簡単に解決することができました！ とっても勉強になりました。