0

IE8でこの線の回転を機能させるにはどうすればよいですか？これを使用してms-filterを取得しましたが、それでも機能しません。

これがJSFIDDLEです。

HTMLは次のとおりです。

<div class="mainmenu">
    test
</div>

およびCSS：

.mainmenu:before {
    background: none repeat scroll 0 0 #333333;
    content: "";
    display: block;
    height: 1px;
    position: relative;
    right: 12.5%;
    transform: rotate(-45deg);
    width: 35%;
    z-index:10000;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
     -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
}

どんな助けでも大いに感謝します..ありがとう

4

2 に答える 2

0 
transform: rotate(45deg);  /* CSS3 (for when it gets supported) */
  -moz-transform: rotate(45deg);  /* FF3.5+ */
  -o-transform: rotate(45deg);  /* Opera 10.5 */
  -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
  filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
于 2013-03-27T10:08:18.973 に答える
0

IE8は標準のCSS3ローテーションをサポートしていませんが-ms-filter、同じことを実行できるスタイルを備えています（ただし、構文ははるかに複雑で、いくつかの厄介な注意事項があります）。

ただし、少しのJavascriptを使用する準備ができている場合は、これに適切なポリフィルスクリプトを使用することを強くお勧めします。これにより、rotate古いIEバージョンでも標準のCSS構文を使用できるようになります。

回転について私が知っている最高のポリフィルスクリプトはCSSサンドペーパーです。

これを使用すると、（ほぼ）標準のCSSコードを使用できるようになります。つまり、（1）コードはブラウザー間でより一貫性があり、したがって保守が容易になり、（2）恐ろしい-ms-filter構文を学ぶ必要がなくなります。

したがって、-ms-filterコードの代わりに、次のような行があります。

-sand-transform: rotate(-45deg);

に加えてrotate、CSSサンドペーパーは他のさまざまなCSS3効果を古いIEバージョンに実装しているため、非常に便利なツールになっています。

お役に立てば幸いです。

于 2013-03-27T10:24:58.093 に答える