table cell content rotation bug in ie8 and ie9

I'm trying to create a table that will have in first column cells with rowspan. I would like this text to be rotated.

I managed to get this working on chrome, but on IE I get weird result.
This is result on Chrome:

and this is on IE8 (IE10 works fine):

and here is IE9 result:

I tried with width and height properties, but it didn't help.

Below is my css for those td elements and here is jsFiddle to test it: 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);
}

How should I change my css to remove that align issue? My table is generated by server so it can have different size (number of rows in groups).

I need to get this working on IE8.

EDIT:
When I change text length in those rotated cells it start to look almost right. But if I'll have longer text can I wrap it somehow into 2 lines? And there is centering issue - text in those cells isn't centered (IE8).

---

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.

---

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

You are using <tbody> but no <thead> or <tfoot> .

You are placing <div> inside <td>. - Is a DIV inside a TD a bad idea?

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.

链接地址: http://www.djcxy.com/p/94526.html

上一篇: 水平滚动表上的溢出

下一篇: 表格单元格内容旋转bug ie8和ie9