0

我对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 转换。

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

谢谢。

4

1 回答 1

3

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

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

如果你真的需要支持旧的浏览器（就 IE6 而言），你可能应该使用 JavaScript，因为……嗯……IE9 之前的任何东西都非常糟糕。

于 2013-08-04T18:05:07.477 回答