-4

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 では実行されていません。問題は、ホバーとボックス シャドウ効果が適用されないことです。

4

3 に答える 3

1

box-shadow など、ie8 でサポートされていない CSS プロパティがいくつかあります。ie の hover プロパティは、リンクに href が関連付けられている場合にのみ機能します。新しい css3 との ie8 の互換性を支援するために過去に使用したオプションの 1 つは、PIE - http://css3pie.com/です。実装は非常に簡単で、box-shadow などの新しい css3 プロパティを使用できます。

于 2013-10-25T12:09:37.340 に答える
0

ie9 の場合は忘れてください: -ms-

transform:scale(1.2);
-ms-transform:scale(1.2);

しかし、ie9 は「トランジション」をサポートしていません。つまり、古いバージョンでは、変換プロパティにフィルターを使用する必要があります。このリンクを見てください: リンク

于 2013-10-25T12:25:31.590 に答える