0

1 つのラベル テキストを 270 度回転させたスライド メニューを作成しています。Explorers 10+9 を含む最新のすべてのブラウザで問題なく動作します。しかし、古いIE8とIE7でも機能させたいので、SOの多くの回答で推奨されているフィルター定義を追加しましたが、機能しません。IE 開発者ツールを IE8 ブラウザー (IE8 標準モード) に切り替えてページをテストしました。

ここにjsfiddle +そのプレビューがあります。

CSS

.menu p.heading {
    position:absolute;
    right:-22px;
    top:3em;
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    transform:rotate(-90deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

フィルターに引用符を追加/削除しようとし、html5 doctype を xhtml に変更しましたが、何も機能していないようです。誰かが IE 8 & 7 に正しく設定する方法についてアドバイスをくれますか?

次に、1 つの副次的な質問:ここに示すように、これら 2 つの IE8 固有の定義を別々のタグで分離する利点はありますか?

<!--[if lte IE 8]>
<style type="text/css">
.rotation {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<![endif]-->

ヒントをありがとう！

4

1 に答える 1

2

ローテーションは IE8 で機能しているようです。ただし、回転したアイテムの位置が正しくないため、最初にページを表示したときに、回転したテキストが画面の端からはみ出します。ホバーすると表示され、ボックスが表示されます。

これは、IE8 のfilterスタイルが標準の CSS とは異なる回転ポイントを持つためです。左上隅を回転ポイントとして使用しますが、CSS のデフォルトは中央です。同じポイントを使用するように、それらのいずれかを変更する必要があります。正しく配置すると、すべてのブラウザーで同じように表示されます。

これは実際にはそれほど簡単ではありませんrotation=3.IEでは、現在の比較的簡単なものではなく、複雑な行列演算で完全に異なる回転フィルターを使用する必要があります. CSSSandpaperfilterを呼び出して、IE8 およびそれ以前のバージョンで標準の CSS ローテーションを認識できるようにします-sand-rotate(-90deg);。

これにより、コードの操作がはるかに簡単になり、ブラウザー間で一貫して動作します。

2 番目の質問に答えるには、はい、filterローテーションを使用している場合は、filterスタイルを IE<=8 固有のブロックに配置することをお勧めします。これは、IE9 に干渉するためです。

IE9 は標準の CSS ローテーションをサポートしていますが、フィルターでも機能するため、現状では IE9 では両方のローテーションを取得しているため、完全に間違っています。(グラフィックの破損が発生します。きれいではありません)。

ただし、上記で提案したように CSS Sandpaper を使用している場合、使用している IE のバージョンが検出され、IE9 では実行されないため、この点は関係ありません。その場合、IE8 は必要ありません。特定のスタイルシート。

于 2013-05-23T16:11:31.180 に答える