0

我有一些垂直文本。在 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;
4

2 回答 2

2

简短的回答：不要-ms-filter用来旋转 IE9 中的东西。

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

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

在较旧的 IE 版本（IE8 和更早版本）中，您确实需要使用-ms-filter（或只是filter），如果您真的想进行旋转，您将不得不忍受这样的故障。

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

如果您当前正在使用标准 CSS 旋转并 -ms-filter在相同的 CSS 代码中，那么这也可能会导致问题 - 将它们放在一起会导致问题，因为浏览器会尝试同时执行它们并最终导致所有错误.

这是因为 IE9 同时支持旧-ms-filter样式和新变换样式。但是，如果您尝试同时执行它们，则会完全混淆。IE10 中不存在该问题，因为 IE10 不再支持-ms-filter样式。

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

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

于 2013-08-01T13:10:07.303 回答
0

添加一个font-weight:normal;

例如，

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. */

这有望解决您的目的。

于 2013-08-01T13:05:43.293 回答