html - ie8 和 ie9 中的表格单元格内容旋转错误

Question

我正在尝试创建一个表格，该表格的第一列单元格具有行跨度。我希望旋转此文本。

我设法在 chrome 上运行，但在 IE 上我得到奇怪的结果。
这是 Chrome 上的结果:

这是在 IE8 上(IE10 工作正常):

这是 IE9 的结果:

我尝试使用宽度和高度属性，但没有帮助。

下面是我的那些 td 元素的 css，这里是 jsFiddle 来测试它:http://jsfiddle.net/qYySC/4/

td.rotate div {
    vertical-align: middle;
    text-align: center;
    font-size: 12px;
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

我应该如何更改我的 css 以消除该对齐问题？我的表是由服务器生成的，因此它可以有不同的大小(组中的行数)。

我需要让它在 IE8 上运行。

编辑:
当我在那些旋转的单元格中更改文本长度时，它开始看起来几乎是正确的。但是如果我有更长的文本，我可以把它分成两行吗？并且存在居中问题 - 这些单元格中的文本未居中 (IE8)。

Answer 1

这里有两个问题:

• 首先，在 IE8 及更早版本中:

  IE8 使用 filter 样式通过 ActiveX 进行旋转。这是一个复杂的野兽，但它的主要问题是它的默认旋转点是元素的左上角，而不是中心。这解释了为什么将元素旋转到与标准 CSS 不同的位置。

  可以将其更改为使用中心作为旋转点，但您需要在 filter 样式中使用更复杂的语法，使用 matrix filter 。即使是基本旋转所需的数学运算也有点令人生畏，因为它全部以弧度为单位，而且它是一个复杂的矩阵变换，但它是可以计算出来的，如果你知道去哪里找的话，网上有一些例子，包括 existing questions here on SO 。幸运的是，旋转 270 度的弧度数字实际上是相对可读的，但情况并非总是如此。对于大多数情况，我建议使用 CSS Sandpaper 库(见下文)，而不是手动计算 filter 矩阵。

• 其次是 IE9:

  IE9 有双重问题。这里的问题是，在 IE9 中，他们添加了对标准 CSS transform 样式的支持，但他们还保留了对旧的 filter 样式的支持。

  这意味着在 IE9 中，您的代码实际上同时命中了它们，并且使用不同的技术被旋转了两次。这导致 IE 变得完全困惑，因此呈现黑框。

  这里的快速解决方案是设置一种或另一种样式，以便 IE9 看不到它。这可能是使用特定于 IE 版本的样式表或 CSS hack，或其他任何东西。

这样就解释了正在发生的事情，并为您提供了一些关于如何修复它的线索。

但是您可能还想使用另一种解决方案。有一个名为 CSS Sandpaper 的 JS 库，它充当 transform 样式的 polyfill；即它增加了对标准 CSS 转换的支持到旧的 IE 版本。

所以我的最佳解决方案建议是下载 CSS Sandpaper 库，将其包含在您的站点中，并将 filter 样式更改为 -sand-transform:rotate(270deg);

希望对您有所帮助。