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

我有一个特殊的问题,需要以45度角显示一段文字.要求是支持“所有浏览器”,但我设法消除IE6(非常感谢)和旧版本的Mozilla / Opera.这个显示的要求是这样的：

我可以使用这个CSS / HTML在CSS3兼容的浏览器(几乎所有东西的最新版本)中对它进行排序：

.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);

}

free

它适用于IE9和更新的Firefox,Safari和Opera.然后我需要让IE7和IE8工作 – 这就是它变得有趣的地方.我可以在IE8上使用过滤器,在IE8上使用-ms-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文件中的绝对一切.删除过滤器行会恢复CSS的其余部分,但自然不会旋转文本.

在IE8中一切正常,但是将其添加到选择器会导致IE9出现故障. IE9似乎试图同时使用-ms-filter和-ms-transform属性 – 这会引起一些内部混淆.因此,IE9显示如下所示：

显然,这里有些问题 – 但我如何解决这个问题以便在IE7,8和9中运行？

提前谢谢了.