6

重複の可能性:
IE の CSS 回転プロパティ

ここで、IE-8、IE-7バージョンでテキストを回転させるのに役立つ人はいますか? Chome、firefox、IE-9 で動作していますが、IE-8、IE-7 では結果がありません。 

<a href="#" class="beta_home">BETA</a>

css
a.beta_home{
  position: absolute;
  text-decoration: none;
  top: 12px;
  right:0;
  margin-left: 0px;
  font-size: 9px;
  color:red;
  border: 1px solid #fff; 
  display: block; 
    -webkit-transform: rotate(-90deg);  
    -moz-transform: rotate(-90deg);  
    -ms-transform: rotate(-90deg);  
    -o-transform: rotate(-90deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
4

3 に答える 3

5

私はどのブラウザでもそれをすることを好まないでしょう、なぜならそれらはすべてそれを非常に異なってレンダリングするからです..しかしあなたはjavascriptでそれをすることができます

ドキュメント http://code.google.com/p/jquery-rotate/

コマンド $（'＃theimage'）。rotateRight（45）; $（'＃theimage'）。rotateLeft（）;

これにより、IE 9でも同じようにレンダリングされ、chrome、firefox、opera、safariにより、ブラウザーレンダリングでテキストを回転させる代わりに、キャンバスオブジェクトが使用されます。

ie8、7、6の古いコーディングを使用しますここで生成します

/* IE8+ - must be on one line, unfortunately */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand')";
/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand');

元作業

IE 7＆8でテストされた Fiddle（Chromeではマージンが異なる必要があり、他のブラウザーでは理由がわかりませんが、違いはあります）

異なるブラウザでcssを区別する方法がわからない場合は、このリンクを参照してください

私の意見

このすべてに加えて、フォトショップを使用して（すでに回転された）画像として作成することをお勧めします。または、そのようなプログラムにアクセスできない場合は、無料で使用してください（GIMP）

于 2012-11-26T08:16:10.330 に答える
0 
/* IE8+ - must be on one line, unfortunately */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand')";
/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand');

/* For IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
于 2012-11-26T08:13:44.393 に答える
0

このオンライン サービスを使用してみてください。

http://www.useragentman.com/IETransformsTranslator/

css3ルールを変換します

rotate(-90deg)

適用されdivたWIDTH: 220px; HEIGHT: 70px;

IE 固有のルール:

/*
 * The following two rules are for IE only and
 * should be wrapped in conditional comments.
 * The -ms-filter rule should be on one line 
 * and always *before* the filter rule if
 * used in the same rule.
 */

#transformedObject {

   /* IE8+ - must be on one line, unfortunately */ 
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=3.061515884555943e-16, M12=1, M21=-1, M22=3.061515884555943e-16, SizingMethod='auto expand')";

   /* IE6 and 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=3.061515884555943e-16,
            M12=1,
            M21=-1,
            M22=3.061515884555943e-16,
            SizingMethod='auto expand');


   /*
    * To make the transform-origin be the middle of
    * the object.    Note: These numbers
    * are approximations.  For more accurate results,
    * use Internet Explorer with this tool.
    */
   margin-left: 71px; 
   margin-top: -78px;

}
于 2012-11-26T09:50:55.740 に答える