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 上运行。

编辑：
当我在那些旋转的单元格中更改文本长度时，它开始看起来几乎是正确的。 但是，如果我有更长的文本，我可以以某种方式将它包装成 2 行吗？并且存在居中问题 - 这些单元格中的文本未居中（IE8）。

Answer 1

这里有两个问题：

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

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

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

• 其次是IE9：

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

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

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

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

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

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

希望对您有所帮助。

Answer 2

您的<table> 标记存在许多问题，因此可能是造成混乱的原因。

1. 您使用的是<tbody>，但没有使用<thead> 或<tfoot>。
2. 您将<div> 放入<td>. - Is a DIV inside a TD a bad idea?
3. 您没有使用任何<col> 元素。

它看起来可以在 GG、FF、AS、OWB 以及 IE10 和 IE9 上找到。但是在 IE8 上，jsfiddle 根本拒绝出现。