Doctype y CSS

Tengo el siguiente código con doctype transitional pero cuando lo configuro en estricto, la posición de las imágenes cambia y se mueve hacia arriba. ¿Podría ayudarme a comprender el problema subyacente y dónde puedo encontrar una lista de este tipo de otros conflictos de CSS entre doctypes diferentes?Doctype y CSS

Tenga en cuenta que sé que algunas etiquetas HTML no están disponibles en modo estricto, pero soy específico sobre conflictos de CSS.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<body> 
<style type="text/css"> 
span.check:before { content: url("http://i41.tinypic.com/2rxea7d.png"); } 
</style> 
<table> 
<tr> 
<th>Ruby on Rails</th> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
</tr> 
<tr> 
<th>Road on Rails</th> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
    <td><span class="check"></span></td> 
</tr> 
</table> 
</body> 
</html>

Fuente

2012-01-30 Shawn Taylor

¿En qué navegadores? – vvondra

En FX 9.0.1 y Chrome más reciente, pero no estoy seguro acerca de los demás. –

Lea: http://www.quirksmode.org/css/quirksmode.html – zvona

En el modo peculiaridades y el modo casi estándar de las imágenes (que son contenidos en línea, por lo que están dispuestos sobre el mismo conjunto de líneas como caracteres de la fuente) son zero-height positioned at their baseline.

Puede obtener el mismo efecto en el modo Estándares al mezclar la propiedad vertical-align de sus imágenes generadas o configurarlas como display: block.

Fuente

2012-01-30 12:59:14 Quentin

He puesto display: block ; debajo del contenido adecuado, pero no ha cambiado nada y la diferencia entre ambos tipos de documento permanece intacta. –

Espero que el cambio de su doctype cambie el modo en que ciertas versiones de Internet Explorer operan desde el modo estándar al modo de compatibilidad. Internet Explorer (entre otras cosas) corrigió cómo interpreta el modelo de recuadro de borde, pero fue capaz de cambiar entre el método anterior y el corregido dependiendo del DOCTYPE.

Fuente

2012-01-30 13:01:29

Respuesta

Cuestiones relacionadas