html - 在所有浏览器中以45度显示文本

我遇到一个与以45度 Angular 显示一段文字有关的特殊问题。要求是支持“所有浏览器”，但是我设法消除了IE6(非常感谢)和Mozilla/Opera的旧版本。此显示的要求是这样的:

我可以使用以下CSS/HTML在符合CSS3的浏览器(几乎所有版本的最新版本)中进行排序:

<style type="text/css">
.homepage-top .red-corner {
    position: absolute;
    right: 0px;
    top: 300px;
    width: 0px;
    height: 0px;
    border-top: 55px solid #e11e2d;
    border-left: 55px solid transparent;
    z-index: 9;
}

.homepage-top .free {
    position: absolute;
    right: 3px;
    top: 310px;
    text-transform: uppercase;
    color: white;
    font-size: 10pt;
    font-weight: bold;
    z-index: 10;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -sand-transform: rotate(45deg);
    transform: rotate(45deg);
}
</style>

<div class="red-corner"><!-- --></div>
<div class="free">free</div>

它与IE9和更新的Firefox，Safari和Opera兼容。然后我需要使IE7和IE8正常工作-这就是它变得有趣的地方。我可以在IE7上使用filter，在IE8上使用-ms-filter-我的确得到了非常有趣的结果。

filter/-ms-filter看起来像这样:

filter: progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

将其添加到.homepage-top .free选择器会使IE7正确显示旋转后的文本(尽管带有一些黑色到白色的字母，但我可以接受)-但它忽略了该行之后的css文件中的所有内容。删除filter行将恢复其余的CSS，但是自然不会旋转文本。

在IE8中，一切正常，但是将其添加到选择器会导致IE9出现故障。似乎IE9试图同时使用-ms-filter和-ms-transform属性-这会引起一些内部困惑。结果，IE9显示如下:

显然，这里有问题-但是我该如何解决这个问题，使其在IE7、8和9中正常工作？

提前谢谢了。

最佳答案

您可以使用条件注释为每个MSIE提供其自己的样式表。
http://de.wikipedia.org/wiki/Conditional_Comments
