html - IE 中的 CSS 过渡问题

Question

我对 HTML 和 CSS 有疑问。所以我的列表有一个 CSS 样式，但在 IE 中它不起作用。

这是我的 HTML 文件:

<ul class="main-ul2">
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>Article</span></a></li>
    <li><a href="#"><span>Blog</span></a></li>
    <li><a href="#"><span>Gallery</span></a></li>
</ul>

这是我的 CSS 文件:

.main-ul2 li {
    margin-left: 0;
    float:left;
    position:relative;
    width:25%;
    text-align:center;
    }
.main-ul2 li a {

    display:block;
    padding-bottom: 20px;
    padding-right:10px;
    padding-top: 10px;
    padding-left:10px;
    text-decoration:none;
    position: relative;
    z-index: 100;
    background-color: rgba(164, 164, 164, 0.2);
    –ms-??transition: all 1s;
    -webkit-transition: all 1s;
   -moz-transition: all 1s;
   -o-transition: all 1s;
   transition: all 1s;
}
.main-ul2 li a span{
   display:block;
   padding-top:10px;
   font-weight:700;
   font-size: 20px;
   color: rgba(120, 120, 120, 0.9);
   text-transform:uppercase;
   font-family: 'Kotta One', serif;

.main-ul2 li:hover span{
   color: #fff;
}

.main-ul2 li:nth-child(1):hover a{
background-color: rgba(175,54,55,0.8);
–ms-transform:rotate(-3deg);
-moz-transform: rotate(-3deg);
-webkit-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.main-ul2 li:nth-child(2):hover a{
   background-color: rgba(199, 204, 73, 0.8);
   –ms-transform:rotate(-3deg);
   -moz-transform: rotate(-3deg);
   -webkit-transform: rotate(-3deg);
   -o-transform: rotate(-3deg);
   transform: rotate(-3deg);
}
.main-ul2 li:nth-child(3):hover a{
   background-color: rgba(213, 135, 11, 0.8);
   –ms-transform:rotate(3deg);
   -moz-transform: rotate(3deg);
   -webkit-transform: rotate(3deg);
   -o-transform: rotate(3deg);
   transform: rotate(3deg);
}
.main-ul2 li:nth-child(4):hover a{
   background-color: rgba(51, 143, 144, 0.8);
   –ms-transform:rotate(3deg);
   -moz-transform: rotate(3deg);
   -webkit-transform: rotate(3deg);
   -o-transform: rotate(3deg);
   transform: rotate(3deg);
}

因此，如果您使用的是 Google Chrome，则可以将我的代码插入 CCS Desk或任何其他在线 CSS 编辑器，一切正常(元素符号会改变颜色和移动)，但如果您在 IE 中打开我的代码，您会发现它无法正常工作.

我在Google中搜索了一下，发现需要添加Microsoft transform。

那么有人能告诉我如何添加 Microsoft 转换或者是否有任何其他方法可以解决此问题？

谢谢。

Answer 1

IE10 表明您可以删除 -ms- 前缀并使用 base 属性。也就是说，我会继续使用它来支持旧版浏览器。

如果您包含 -o- 和 -webkit-，您应该可以很好地适应最新的浏览器。如果您需要支持旧版本的 Firefox，也可以使用 -moz-。

如果您真的需要支持旧浏览器(至于 IE6)，您可能应该使用 JavaScript，因为......好吧......IE9 之前的任何东西都非常糟糕。