¿Por qué Safari ignora los atributos de altura de fila (tr) de la tabla css después de volver a dibujar?

StackOverflow https://stackoverflow.com/questions/1627083

Pregunta

Estoy luchando por aplicar el estilo CSS a una tabla html generada por GWT (Google Web Toolkit) en Safari. Específicamente, no puedo lograr que Safari respete el atributo de altura de una fila de la tabla después de activar cualquier tipo de re-dibujo de la tabla.

El siguiente ejemplo básico ilustra el problema: 

<html>
    <head>
        <style type="text/css">
            tr {
                height: 50px;
                font-weight: bold; /* added to prove that other style rules are re-applied when enabling css again */
            } 
        </style>
    </head>
    <body>
        <table border="1px">
            <tr>
                <td>one</td>
                <td>two</td>
                <td>three</td>
            </tr>
        </table>
    </body>
</html>

Si abro esta página en Safari, se muestra correctamente al principio. Si luego elijo " deshabilitar estilos " desde el menú Desarrollar y luego volver a habilitarlos de inmediato, se ignora la regla de altura y la altura de la fila de la tabla se calcula como si estuviera establecida en "auto".

Esto es exactamente lo que sucede cuando se agregan o eliminan filas / celdas mediante programación en mi GWT FlexTable.

¿Alguien sabe qué causa este comportamiento y si hay una solución alternativa que no requiere establecer una altura fija en toda la tabla?

Detalles: Ejecutar Safari versión 4.0.3 (5531.9) en Mac OSX Leopard
El problema también ocurre usando el navegador GWT Hosted Mode (que esencialmente es Safari cuando se ejecuta en una Mac)

¿Fue útil?

Solución

Las etiquetas

TR no tienen atributo de altura en las especificaciones del W3C. En su lugar, debe establecer la altura de las etiquetas TD que contiene.

Otros consejos

WebKit está optimizado para el rendimiento y, en ocasiones, se niega a volver a dibujar ciertas áreas, si cree que no es necesario. Es posible que pueda solucionar esto desencadenando un redibujo total, p. cambiar el tamaño de la ventana 1px y 1px hacia atrás (debe haber alguna forma más inteligente).

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top