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

Question

我有一个关于以45度角显示文本的奇怪问题。要求支持“所有浏览器”，但我已经成功排除了IE6和较旧版本的Mozilla/Opera。这个显示的要求如下图所示： 在符合CSS3标准的浏览器中（几乎所有最新版本），我可以使用以下CSS/HTML来解决这个问题：

<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中都能正常工作？

非常感谢您提前的帮助。

- Aleks G

Answer 1

是否可以仅使用图像？我通常更喜欢使用CSS样式化纯文本，而不是使用图像，但由于需要支持旧版浏览器，图像是一个更简单的解决方案。

- daGUY

---

那是我的第一反应，但我还需要支持动态语言切换和添加其他语言的能力。因此，我必须为每种语言单独准备一张图片。虽然不太美观，但也许这是可行的方法。 - Aleks G

Answer 2

您可以使用条件注释为每个MSIE提供自己的样式表。 <!--[if lte IE 8]> <style>...</style> <![endif]--> <!--[if IE 9]> <style>...</style> <![endif]--> 更多信息请参考：http://de.wikipedia.org/wiki/Conditional_Comments

- danijar

---

我知道这个 - 我在几个地方都在使用它们 - 所以这也是一个选项，但是这不会解决IE7忽略'filter'行后面所有内容的问题。 - Aleks G

它应该解决IE 9的问题。不幸的是，我无法帮助解决IE 7的问题。（在我的Web项目中不支持IE 7...） - danijar

我希望能够舍弃它，但我的很多工作都与政府部门打交道，其中许多部门仍在使用IE7，并且至少到2014年之前没有迁移计划。 - Aleks G

有趣的是，我将“filter/-ms-filter”从主CSS文件中移除，并将它们与相应的条件语句（针对ie7和ie8）添加到实际的HTML文件中（我不喜欢这样做，但在这种情况下尝试了一下）- 现在所有版本的IE都可以正确显示旋转的文本。 - Aleks G