Vale, creo que ya he encontrado el problema:
Lo de la ventana 1 no creo que sea, pero por si acaso aviso que hay que aceptar los controles de ActiveX para que el texto rote.
Y en todas las otras vemos que el texto no se alinea correctamente cuando utilizamos DOCTYPE, así que toca arreglarlo para que funcione con el DOCTYPE, que creo que es lo más correcto, aunque se me olvidase ponerlo en el código que publiqué xD
EDITADO: Solución para IE9
Para IE9 sería algo así:
Código HTML:
.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);
-ms-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
-ms-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;
}
He sustituido
filter: progid:DXImageTransform.Microsoft.BasicImage(rotat ion=3); por
-ms-transform-origin:25px 10px; y
-ms-transform: rotate(-90deg); y he eliminado lo de
bottom:5px\9; y
left:15px\9;.
EDITADO: Solución para IE8
Código HTML:
.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:5px\9;
left:15px\9; /* ESTE VALOR SE CALCULA: A/2 -10 */
line-height:20px;
width: 280px;
text-align:left;
margin-bottom:260px;
}
A ver si consigo unificarlo todo un poco y sino creo que de momento, aunque sea con códigos ligeramente diferentes, funciona en todos los navegadores.
EDITADO: Solución general: Código HTML:
<!DOCTYPE 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);
-ms-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
-ms-transform: rotate(-90deg);
-o-transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
-o-transform: rotate(-90deg);
transform-origin:25px 10px; /* ESTE VALOR SE CALCULA: A/2 */
transform: rotate(-90deg);
position:absolute;
bottom:20px; /* ESTE VALOR SE CALCULA: A/2 -5 */
left:0;
line-height:20px;
}
@-moz-document url-prefix()
{
.rotar
{
position:relative;
bottom:none;
left:none;
width:20px;
}
}
</style>
<!--[if lt IE 9]>
<style>
.rotar
{
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
width: 280px;
text-align:left;
margin-bottom:260px;
bottom:5px;
left:15px;
}
</style>
<![endif]-->
</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> Este último código funciona en todos los navegadores. El único "problema" que le encuentro es que en Firefox, el <div> que hay dentro de los <th> no se muestra completo, como en el caso de los otros navegadores, es decir, es más pequeño que el texto que contiene. De todos modos, como supongo que ese cuadro no debe verse, no creo que sea ningún inconveniente.