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

Question

我遇到了一个特殊问题，要求以 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 - 我确实得到了非常有趣的结果。

过滤器/-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 中工作？

非常感谢。

Answer 1

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

<!--[if lte IE 8]> <style>...</style> <![endif]-->

<!--[if IE 9]> <style>...</style> <![endif]-->