Buenas, en el otro post le recomiendan buscar hacks para IE, pero yo no te aconsejo eso, creo que la mejor opción es tener hojas de estilos diferentes para navegadores diferentes. Puede parecer un poco engorroso, pero la mayoría de veces no es tanto como parece.
Yo suelo hacer las hojas de estilos probándolo todo en Chrome, y normalmente cambiando los prefijos -webkit por -ms, -moz y -o consigues que las hojas funcionen en IE9 (las versiones más antiguas suelen fallar), Mozilla y Opera.
Te digo esto porque si el problema fuese poner una linea más o una menos no pasaría nada, pero no es el caso, al menos con lo que me ha dado tiempo a hacer ahora.
Tengo lo siguiente:
Código HTML:
<html>
<head>
<style>
th
{
height: 300px;
border:1px solid red;
text-align:center;
vertical-align:bottom;
position:relative;
width:50px; /* ESTE VALOR ES "A" */
background-color:orange;
}
.rotar
{
background-color:green;
display:block;
white-space:nowrap;
-webkit-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
-webkit-transform: rotate(-90deg);
-moz-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
position:absolute;
bottom:20px; /* ESTE VALOR SE CALCULA: A/2 -5 */
bottom:5px\9;
left:0;
left:15px\9; /* ESTE VALOR SE CALCULA: A/2 -10 */
line-height:20px;
}
</style>
</head>
<body>
<table><tr>
<th>NRO</th>
<th>ALUMNO</th>
<th> <div class="rotar">COMUNICACION 1</div></th>
<th> <div class="rotar">EDUCACION POR EL ARTE</div></th>
<th> <div class="rotar">RAZONAMIENTO LOGICO</div></th>
<th> <div class="rotar">HISTORIA</div></th>
<th> <div class="rotar">EDUCACION FISICA</div></th>
<th> <div class="rotar">ARTES MARCIALES</div></th>
<th> <div class="rotar">RELIGION</div></th>
<th> <div class="rotar">ALGEBRA</div></th>
</tr></table>
</body>
</html> Los son para que IE muestre los bordes en las celdas "sin contenido", porque al tener sus divs position:absolute, entiende que la celda está "vacía".
Las líneas con \9 las leen IE7, 8 y 9.
Te he puesto cómo se calcula algunos valores para posicionar bien el texto, pero si modificas el line-height deberás cambiarlos probando hasta que todo ajuste bien.
En Mozilla no funciona, así que insisto en lo de separar las hojas de estilos. Si en el otro post dicen que sólo falla en IE, utiliza aquel código para los demás navegadores y este (quitando lo que no sea necesario para IE), en IE. Lo puedes hacer detectando el navegador con PHP y devolviendo unas u otras hojas de estilos o con algo así:
Código HTML:
<style ..></style> <!--Hojas de estilos para los demás navegadores-->
<!--[if IE]>
<style ..></style> <!--Hojas de estilos para IE-->
<![endif]-->
Sólo ten en cuenta que en el segundo caso estarás sobrescribiendo algunas propiedades (no todas), así que tendrás que ir con más cuidado a la hora de elegir que hay que cambiar y qué no.
Espero que te sea de ayuda.