2

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

我设法让它在 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）。

4

2 回答 2

3

You have two problems here:

  • Firstly, in IE8 and earlier:

    IE8 is using the filter style to do rotation using ActiveX. This is a complex beast, but the main problem with it is that its default rotation point is the top-left corner of the element, rather than the center. This explains why the element is rotated into a different position than the standard CSS.

    It is possible to change it to use the center as the rotation point, but you need to use a much more complex syntax in the filter style, using the matrix filter. The maths required for even basic rotations with this is somewhat intimidating, since it's all in radians, and it's a complex matrix transformation, but it can be worked out, and there are examples on the web if you know where to look, including existing questions here on SO. Fortunately, the radian figures for a 270 degree rotation are actually relatively readable, but that's not always the case. For most cases, I would recommend using the CSS Sandpaper library (see below) rather than manually working out the filter matrix.

  • Secondly IE9:

    IE9 has a double problem. The issue here is that in IE9 they added support for the standard CSS transform style, but they also kept support for the old filter style.

    This means that in IE9 your code is actually hitting both of them and is being rotated twice using different technologies. This leads to IE getting completely confused, hence the black boxes being rendered.

    The quick solution here is to set one or other of the styles so that it is not seen by IE9. This could be using an IE-version-specific stylesheet or a CSS hack, or whatever.

So that explains what's happening and gives you some clues as to how to fix it.

But there is one other solution that you might want to use. There is a JS library called CSS Sandpaper which acts as a polyfill for the transform style; ie it adds support for the standard CSS transform to older IE versions.

So my advice for the best solution is to download the CSS Sandpaper library, include it in your site, and change the filter styles into -sand-transform:rotate(270deg);

Hope that helps.

于 2013-05-29T08:49:38.653 回答
-1

There are many problems with your <table> markup and hence possibly the reason for the mess up.

  1. You are using <tbody> but no <thead> or <tfoot>.
  2. You are placing <div> inside <td>. - Is a DIV inside a TD a bad idea?
  3. You are not using any <col> elements.

It looks find on GG, FF, AS, OWB as well as IE10 & also IE9. But on IE8, the jsfiddle refuses to show up at all.

于 2013-05-29T08:50:11.457 回答