bug de rotação de conteúdo de célula de tabela em ie8 e ie9 - html, css, internet-explorer-8, rotação, internet-explorer-9

Estou tentando criar uma tabela que terá na primeira coluna células com linhas. Eu gostaria que este texto fosse rotacionado.

Consegui fazer isso funcionar no chrome, mas no IE recebo um resultado estranho.
Este é o resultado no Chrome:

e isso é no IE8 (o IE10 funciona bem):

e aqui está o resultado do IE9:

Eu tentei com propriedades de largura e altura, mas não ajudou.

Abaixo está o meu css para esses elementos td e aqui está o jsFiddle para testá-lo: 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);
}

Como devo alterar meu css para remover esse problema de alinhamento? Minha tabela é gerada pelo servidor para que possa ter tamanho diferente (número de linhas em grupos).

Eu preciso fazer isso funcionar no IE8.

EDITAR:
Quando altero o comprimento do texto nessas células rotacionadascomeça a parecer quase certo. Mas se eu tiver um texto mais longo, posso envolvê-lo de alguma forma em duas linhas? E há um problema centralizador - o texto nessas células não está centralizado (IE8).

Respostas:

3 para resposta № 1

Você tem dois problemas aqui:

• Primeiro, no IE8 e versões anteriores:

  O IE8 está usando o filter estilo para fazer a rotação usando o ActiveX. É uma fera complexa, mas o principal problema é que o ponto de rotação padrão é o canto superior esquerdo do elemento, e não o centro. Isso explica por que o elemento é girado para uma posição diferente da CSS padrão.

  É possível alterá-lo para usar o centro como ponto de rotação, mas você precisa usar uma sintaxe muito mais complexa no filter estilo, usando o matrix filtro. A matemática necessária para rotações básicas mesmoisso é um pouco intimidador, pois é tudo em radianos e é uma transformação de matriz complexa, mas pode ser resolvida, e há exemplos na web se você souber onde procurar, incluindo perguntas existentes aqui no SO. Felizmente, os números de radianos para um 270a rotação de graus é relativamente legível, mas esse nem sempre é o caso. Na maioria dos casos, eu recomendaria o uso da biblioteca CSS Sandpaper (veja abaixo) em vez de trabalhar manualmente o filter matriz.

• Em segundo lugar, o IE9:

  O IE9 tem um problema duplo. O problema aqui é que, no IE9, eles adicionaram suporte ao CSS padrão transform estilo, mas eles Além disso manteve o apoio para o velho filter estilo.

  Isso significa que no IE9 seu código é realmenteatingindo os dois e está sendo girado duas vezes usando diferentes tecnologias. Isso leva o IE a ficar completamente confuso, daí as caixas pretas sendo renderizadas.

  A solução rápida aqui é definir um ou outro dos estilos para que não seja visto pelo IE9. Isso pode estar usando uma folha de estilo específica da versão do IE ou um hack CSS, ou qualquer outra coisa.

Isso explica o que está acontecendo e fornece algumas dicas de como corrigi-lo.

Mas há outra solução que você pode querer usar. Existe uma biblioteca JS chamada Lixa CSS que atua como um polyfill para o transform estilo; isto é, adiciona suporte à transformação CSS padrão para versões mais antigas do IE.

Portanto, meu conselho para a melhor solução é fazer o download da biblioteca CSS Sandpaper, incluí-la no seu site e alterar o filter estilos em -sand-transform:rotate(270deg);

Espero que ajude.

---

-1 para resposta № 2

Existem muitos problemas com o seu <table> marcação e, portanto, possivelmente o motivo da bagunça.

1. Você está usando <tbody> mas não <thead> ou <tfoot>.
2. Você está colocando <div> dentro <td>. - Uma DIV dentro de um TD é uma má ideia?
3. Você não está usando nenhum <col> elementos.

Parece encontrar em GG, FF, AS, OWB, bem como IE10 e também IE9. Mas no IE8, o jsfiddle se recusa a aparecer.

---