HTMLのdivタグにCSSを使用しています。これを下に示します。
.sqmenu{ width:120px;
display:inline-block;
height:80px;
border-radius:10px;
margin:15px 0 0px 45px;
box-shadow:#333 2px 2px 20px;
-webkit-transform:scale(1);
transform:scale(1);
color:#093;
-webkit-transition: ease-in-out 0.6s;
-moz-transition: ease-in-out 0.6s;
-o-transition: ease-in-out 0.6s;
-ms-transition: ease-in-out 0.6s;
transition: ease-in-out 0.6s;}
.sqmenu:hover{-webkit-transform:scale(1.2);
transform:scale(1.2);
color:#F63;
-webkit-transition: ease-in-out 0.6s;
-moz-transition: ease-in-out 0.6s;
-o-transition: ease-in-out 0.6s;
-ms-transition: ease-in-out 0.6s;
transition: ease-in-out 0.6s;
}
この行には、次の 2 つのクラスが使用されます。
<div class="nev_menu">
<div class="sqmenu" style="background-color:#aa68aa;">
<a href="ourdelight.html"><div style="text-align:center; margin-top:10px;"><img src="images/Activities60.png" class="linkimg" /></div></a>
<div style="text-align:center;font-family:Verdana, Geneva, sans-serif;
font-size:16px; margin-top:30px;text-decoration:none;">Our Delight</div>
</div>
</div>
この div は、Chrome と FF & IE10 では完全に実行されていますが、IE8 では実行されていません。問題は、ホバーとボックス シャドウ効果が適用されないことです。