Question

我有几个侧面标签可以在Chrome和Firefox中完美运行，但在IE浏览器中却很糟糕。非常感谢有人帮助我。下面是工作http://www.sgsgrass.co.uk/quotation.php

的链接

color: #FFF;
height: 40px;
width: 200px;
font-size: 24px;
line-height: 40px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
writing-mode: tb-rl;
position: fixed;
top: 30%;
left: 0px;
-moz-transform-origin: 20px;
-ms-transform-origin: 20px;
-o-transform-origin: 20px;
-webkit-transform-origin: 20px;
transform-origin: 20px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-right-radius: 10px;
border-top-width: 4px;
border-right-width: 4px;
border-bottom-width: 4px;
border-left-width: 4px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: rgb(255,255,255);
border-right-color: rgb(255,255,255);
border-left-color: rgb(255,255,255);

Answer 1

你错过了

-ms-transform：rotate（90deg）;

Answer 2

我建议您使用图像而不是纯CSS3，因为IE浏览器存在问题。

我在IE8中测试了这个网站http://www.cssrotate.com/并且CSS3转换不起作用。但是，如果您不想要图像，可以使用filter在IE中旋转元素。以下是LINK1和LINK2。你可以看到漂亮的演示HERE（在IE中打开以查看旋转）。这是为了开始，你可以谷歌更多。

使用示例：

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

BasicImage过滤器的rotation属性可以接受以下四个值中的一个：0,1,2或3，它们将分别旋转元素0,90,180或270 degress。

文本在Internet Explorer中旋转，但div保持直立。

2 个答案: