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 transformを追加する必要があることがわかりました。

Microsoft トランスフォームを追加する方法、またはこれを修正する他の方法があるかどうかを誰かに教えてもらえますか?

ありがとう。

4

1 に答える 1

3

IE10 は、-ms-プレフィックスを削除して base プロパティを使用できることを示しています。とはいえ、古いブラウザをサポートするために引き続き使用します。

を含める-o-と、-webkit-最新のブラウザを使用しても問題ありません。-moz-古いバージョンの Firefox をサポートする必要がある場合にも利用できます。

古いブラウザー (IE6 まで) を本当にサポートする必要がある場合は、おそらく JavaScript を使用する必要があります。

于 2013-08-04T18:05:07.477 に答える