DOCTYPE afecta la representación de la altura de línea

Este es un rascador de cabeza.DOCTYPE afecta la representación de la altura de línea

He creado un jsFiddle comentado para demostrar el fenómeno que encontré recientemente al usar el marco Bootstrap de Twitter para crear algunos botones desplegables.

http://jsfiddle.net/jackwanders/WKvPv/

Básicamente, cuando se utiliza un HTML 5, HTML 4 estricto DOCTYPE estricto o XHTML, el botón renders tal como fue diseñado. Sin embargo, al usar un HTML4 o XHTML Transitional DOCTYPE, el botón de intercalación se renderiza con una altura más corta. Aquí está la CSS relevante de Bootstrap para el <span class="caret"> (He quitado estilos que no tienen importancia, como los colores y los gradientes):

.caret { 
    display: inline-block; 
    width: 0; 
    height: 0; 
    vertical-align: top; 
    border-top: 4px solid #000000; 
    border-right: 4px solid transparent; 
    border-left: 4px solid transparent; 
    content: ""; 
} 

.btn .caret { 
    margin-top: 7px; 
    margin-left: 0; 
} 

.btn { 
    display: inline-block; 
    *display: inline; 
    padding: 4px 10px 4px; 
    margin-bottom: 0; 
    *margin-left: .3em; 
    line-height: 18px; 
    *line-height: 20px; 
    text-align: center; 
    vertical-align: middle; 
}

¿Por qué afecta el DOCTYPE la altura del botón? Si line-height se establece en 18px, ¿por qué la altura sería inferior a 18px?

PS - Sí, soy consciente de que Bootstrap requiere HTML5, pero me imagino que es con respecto al HTML 5 características que se utilicen, no cómo el DOCTYPE hace que los estilos CSS

Fuente

2012-06-29 jackwanders

Mientras escribía esta pregunta y la Demostración jsFiddle relacionada, terminé haciendo un poco más de excavación y descubrí lo que está sucediendo. En lugar de descartar la pregunta, pensé que también podría publicarlo con esta respuesta.

lo que he reunido a partir de la inspección de los elementos en Chrome después de cambiar DOCTYPES es la siguiente:

.btn no tiene altura especificada, solamente line-height: 18px y padding: 4px 10px
en HTML5, la altura final de la caret- único botón es 18px, igual que el line-height
definido en un DOCTYPE de Transición, la altura del botón de intercalación sólo es 11px, igual que el outerHeight() de la caret (border-top + margin-top), pero menor que el line-height del botón.

Por lo tanto, sólo puedo asumir que los DOCTYPE estrictas (y HTML5) hacer cumplir line-height como una especie de min-height; incluso si no hay texto en el elemento, se aplica line-height ... mientras que DOCTYPES de Transición no.

Cuando agrego algo de texto al botón de solo caracteres de caridad (  por ejemplo), entonces line-height entra en DOCTYPEs de transición y el botón se renderiza a la altura máxima.

Fuente

2012-06-29 20:30:23 jackwanders

Los DOCTYPEs de transición disparan lo que se llama modo casi estándar, que básicamente es el modo estándar con algunas peculiaridades. Como esto tiene que ver con el modelo de caja, * puede * encontrarse con uno de esos caprichos, pero no estoy seguro ... – BoltClock

Hace poco encontré [esta página de Microsoft] (http: // msdn. microsoft.com/en-us/library/ff405794%28v=vs.85%29) que describe las diferencias de manejo de altura de línea del modo casi estándar. Lo discuto en [esta respuesta] (http://stackoverflow.com/questions/11206730/html5-vs-html4-h1-tag-rendered-with-extra-space-how-to-remove/11217791#11217791) que también es relevante para tu pregunta. En particular, es la ausencia del manejo del puntal lo que causa la diferencia que usted ve. – Alohci

Solo haga clic en este problema. es 2016 afuera, pero todavía estamos lidiando con los mismos problemas :(¡gracias por su respuesta de todos modos! – vmg

DOCTYPE afecta la representación de la altura de línea

Respuesta

Cuestiones relacionadas