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

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

感谢。

Answer 1

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

如果您加入-o-和-webkit-，那么您最好使用最新的浏览器。如果您需要支持旧版本的Firefox，也可以使用-moz-。

如果你真的需要支持旧的浏览器（就IE6而言），你应该使用JavaScript，因为......好吧...... IE9之前的任何东西都很糟糕。

IE中的CSS转换问题

1 个答案: