表格单元格内容旋转bug ie8和ie9
我试图创建一个表，将在第一列单元格与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）。
这里有两个问题：
首先，在IE8及更早版本中：
IE8使用filter样式来使用ActiveX进行旋转。 这是一个复杂的野兽，但它的主要问题是它的默认旋转点是元素的左上角，而不是中心。 这就解释了为什么元素旋转到与标准CSS不同的位置。
可以将其更改为使用中心作为旋转点，但是您需要使用matrix过滤器在filter样式中使用更复杂的语法。 即使是基本旋转所需的数学也有点令人生畏，因为它全部以弧度表示，而且这是一个复杂的矩阵变换，但它可以被计算出来，并且如果你知道在哪里看，包括现有问题在这里。 幸运的是，270度旋转的弧度数字实际上是相对可读的，但情况并非总是如此。 对于大多数情况下，我会推荐使用CSS Sandpaper库（请参阅下文），而不是手动完成filter矩阵。
其次IE9：
IE9有双重问题。 这里的问题是，在IE9中他们增加了对标准CSS transform风格的支持，但他们也支持旧的filter风格。
这意味着在IE9中，你的代码实际上击中了它们，并且正在使用不同的技术旋转两次。 这导致IE变得完全困惑，因此黑盒子被渲染。
这里的快速解决方案是设置一个或另一个样式，以避免IE9看到它。 这可能是使用IE版本特定的样式表或CSS破解，或其他。
因此，这解释了发生的情况并为您提供了一些关于如何解决问题的线索。
但还有其他解决方案可能需要使用。 有一个名为CSS Sandpaper的JS库，它用作transform风格的polyfill; 即它增加了对旧版IE版本的标准CSS转换支持。
所以我建议最好的解决方案是下载CSS Sandpaper库，将其包含在您的网站中，并将filter样式更改为-sand-transform:rotate(270deg);
希望有所帮助。
您的<table>标记存在很多问题，因此可能导致混乱。
<tbody>但没有<thead>或<tfoot> 。 <div>放入<td>. - TD内的DIV是一个坏主意吗？ <col>元素。 它看起来在GG，FF，AS，OWB以及IE10和IE9上都可以找到。 但在IE8上，jsfiddle完全拒绝出现。
链接地址: http://www.djcxy.com/p/94525.html