Question

我有一些垂直文字。在IE9中，它看起来像粗体文本。如果文本不旋转，它看起来很正常。如何修复此IE功能？我使用跟随旋转：

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=3.061515884555943e-16, M12=1, M21=-1, M22=3.061515884555943e-16, SizingMethod='auto expand')";

文本的计算样式是：

display: block;
font-family: Arial, sans-serif;
font-size: 14px;
height: 20px;
line-height: 20px;

Answer 1

简答：不要使用-ms-filter在IE9中旋转内容。

IE9支持CSS标准transform:rotate()样式（as -ms-transform），因此您应该使用它。

众所周知，旧的-ms-filter样式存在错误和故障，而这种情况恰恰就是他们着名的故障。如果你正在使用-ms-filter，那么当你得到这样的东西时不要感到惊讶。

在较旧的IE版本（IE8及更早版本）中，你需要使用-ms-filter（或只是filter），如果你真的想要轮换，你将不得不忍受这样的故障。

但是在IE9中，你不需要它;它支持标准的CSS，所以请使用它。更好的兼容性和更少的渲染故障。问题解决了。

如果您当前在相同的CSS代码中使用标准CSS轮换和 -ms-filter，那么这也会导致问题 - 将它们放在一起会导致问题，如浏览器试图同时执行它们并最终使它完全错误。

这是因为IE9支持旧-ms-filter样式和新变换样式。但如果你试图同时做这两件事，那就完全搞糊涂了。 IE10中不存在该问题，因为IE10不再支持-ms-filter样式。

如果您同时使用这两种浏览器，因为您需要支持IE8以及更新的浏览器，那么您应该考虑使用IE8特定的-ms-filter样式，以便IE9看不到它。最简单的选择可能是使用IE条件注释在<body>标记中包含IE版本类，并将-ms-filter样式放入.ie8 #rotateme（当前选择器为{{ {1}};根据需要进行更改。

IE8的另一个选择是使用CSS Sandpaper polyfill库，它将CSS标准旋转样式反向移植到IE8中。它在幕后使用#rotateme，但这意味着您的实际CSS代码不需要在代码中使用过滤器，因此您不需要为IE8 / 9兼容性做任何特殊的操作。

Answer 2

添加font-weight:normal;

For Instance，

display: block;
font-family: Arial, sans-serif;
font-size: 14px;
height: 20px;
line-height: 20px;
font-weight:normal; /* Add this to normalize the boldness of your fonts. */

这有望解决你的目的。

旋转后，文本在IE9中看起来很粗体

2 个答案: