ie8和ie9中的表格单元格内容轮换错误

Question

我正在尝试创建一个将在第一列单元格中包含rowspan的表格。 我希望这个文本能够被轮换。

我设法让这个工作在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样式使用filter样式中更复杂的语法。即使是基本旋转所需的数学也有些令人生畏，因为它全部都是弧度，而且它是一个复杂的矩阵变换，但它可以解决，如果你知道在哪里看，网上有例子，包括{{ 3}}。幸运的是，270度旋转的弧度数字实际上相对可读，但情况并非总是如此。对于大多数情况，我建议使用CSS Sandpaper库（见下文）而不是手动编制transform矩阵。

• 其次是IE9：

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

  这意味着在IE9中，您的代码实际上正在同时攻击它们，并且使用不同的技术旋转两次。这导致IE完全混淆，因此黑框被渲染。

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

这样可以解释发生了什么，并为您提供了解决方法的一些线索。

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

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

希望有所帮助。

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＆amp;还有IE9。但是在IE8上，jsfiddle完全拒绝出现。