-4

我在 html 中使用 CSS 作为 div 标签。如下图所示。

.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;
}

这两个类用于此行：

<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

ie8 不支持几个 css 属性，包括 box-shadow。ie 的悬停属性仅在链接具有关联的href 时才有效。我过去用来帮助 ie8 与较新的 css3 兼容的一个选项是 PIE - http://css3pie.com/。它相当容易实现，并允许您使用较新的 css3 属性，如 box-shadow。

于 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 回答
0

IE10 之前不支持CSS3 过渡。

于 2013-10-25T12:06:05.627 回答