IE7 no entiende la pantalla: bloque en línea

127

¿Alguien puede ayudarme a entender este error? Con Firefox funciona bien, pero con Internet Explorer 7 no. Parece no entender el display: inline-block;.

html:

<div class="frame-header">
    <h2>...</h2>
</div>

css:

.frame-header {
    height:25px;
    display:inline-block;   
}
html internet-explorer-7 css lanthuong
fuente
1
¿Qué es exactamente para ti lograr? ¿Que efecto?
Iladarsda

Respuestas:

302

El display: inline-block;truco de IE7 es el siguiente:

display: inline-block;
*display: inline;
zoom: 1;

Por defecto, IE7 solo admite inline-block con inlineelementos naturales ( Tabla de compatibilidad de Quirksmode ), por lo que solo necesita este truco para otros elementos.

zoom: 1está ahí para disparador de hasLayoutcomportamiento, y usamos el truco propiedad estrella para el ajuste del displayque inlinesólo en IE7 e inferior (los nuevos navegadores que no serán de aplicación).hasLayouty inlinejuntos básicamente provocarán un inline-blockcomportamiento en IE7, por lo que estamos contentos.

Este CSS no se validará, y puede hacer que su hoja de estilo se estropee de todos modos, por lo que puede ser una buena idea usar una hoja de estilo solo para IE7 a través de comentarios condicionales .

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
kapa
fuente
40
Prefiero *zoom:1;triger hasLayout. Así que es más claro que el *zoomy *displayvan juntos
yunzen
44
@RoshanWijesena w3schools no tiene nada que ver con w3c y tampoco lo son las autoridades de ie7
Musa
1
@RoshanWijesena w3schools no es un buen recurso y no es oficial en absoluto. No dependas de ello. El hecho de que mencionen o no mencionen algo no significa realmente nada.
kapa
1
¡gracias chicos! Entonces, ¿qué debo usar como documentación oficial?
Roshan Wijesena
2
@RoshanWijesena Puede encontrar las especificaciones oficiales estándar en w3.org , la página oficial de W3C. developer.mozilla.org es un gran recurso que puede usar en lugar de w3schools como referencia.
kapa
8

Actualizar

Como ya nadie usa IE6 y 7, presentaré una solución diferente:
ya no necesita un hack, porque IE8 lo admite solo

Para aquellos que deben admitir esos navegadores de la edad de piedra antes de IE8 (no es que el IE8 sea tan viejo, demasiado tosido ):
para la cuenta del control de versiones de IE, use alguna clase condicional en la <html>etiqueta como dice Paul Irish en su artículo

<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->

De este modo, tendrá diferentes clases en html-tag para diferentes navegadores IE

El CSS que necesitas es el siguiente

.inline-block {
    display: inline-block;
}
.lt-ie8 .inline-block {
    display: inline;
    zoom: 1;
}

Esto validará y no necesita un archivo CSS adicional

Vieja respuesta

.frame-header
{
    background:url(images/tab-green.png) repeat-x left top;
    height:25px;
    display:-moz-inline-box;    /* FF2 */
    display:inline-block;   /* will also trigger hasLayout for IE6+7*/
}
/* Hack for IE6 */
* html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}
/* Hack for IE7 */
* + html .frame-header {
    display: inline; /* Elements with hasLayout and display:inline behave like inline-block */
}
Yunzen
fuente
El CSS que muestra arriba tiene sentido, pero ¿cómo funcionaría exactamente en el HTML? Gracias.
StephenESC
@StephenESC de dos maneras. Agrega la clase inline-blockal frame-headerelemento. O cambie inline-blockpor frame-headeren los selectores CSS.
Yunzen
1

IE7 no admite 'inline-block' correctamente, más información aquí: LINK
Use puede usar: 'inline' en su lugar.

¿Qué es exactamente lo que estás tratando de lograr? Haznos un ejemplo y ponlo aquí: http://jsfiddle.net/

Iladarsda
fuente
0

use en línea, funciona con este tipo de selectores para elementos de la lista:

ul li {}

o para ser específico:

ul[className or name of ID] li[className or name of ID] {}
MiddleKay
fuente
2
inlineNo es lo mismo que inline-block. Por ejemplo, height: 25px;en el ejemplo no tendrá efecto cuando el elemento lo sea inline. Además, la pregunta no dice nada sobre listas.
kapa