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，请参阅此链接

我的意见

除此之外，我建议您使用 Photoshop 将其制作为图片（已经旋转），或者如果您无法访问此类程序，请免费使用（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 回答