IE7 no entiende la visualización: inline-block

¿Puede alguien por favor ayudarme a resolver 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;   
}
Author: kapa, 2011-07-01
Source

4 answers

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

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

De forma predeterminada, IE7 solo soporta inline-block en elementos naturalmente inline ( Tabla de compatibilidad Quirksmode), por lo que solo necesita este truco para otros elementos.

zoom: 1 ¿está ahí para desencadenar hasLayout comportamiento, y usamos la propiedad de estrella hack para establecer el display a inline solo en IE7 y versiones inferiores (los navegadores más nuevos no aplicarán eso). hasLayout y inline juntos básicamente desencadenarán inline-block comportamiento en IE7, por lo que somos felices.

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

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
 300
Author: kapa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-08-22 08:49:07

Actualizar

Como ya nadie usa IE6 y 7, presentaré una solución diferente:
Ya no necesitas un hack, porque IE8 lo soporta por sí mismo

Para aquellos que deben apoyar los navegadores de la edad de piedra antes de IE8 (No es que el IE8 es tan viejo, también tos):
Para la cuenta de control de versiones de IE, use alguna Clase Condicional en la etiqueta <html>como Paul Irish dice 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]-->

Por esto tendrá diferentes clases en html-tag para diferentes navegadores IE

El CSS que necesita es el siguiente

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

Esto se validará y no necesita un archivo CSS adicional

Antigua 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 */
}
 8
Author: HerrSerker,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-25 10:26:25

IE7 no soporta '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/

 1
Author: Iladarsda,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-07-01 07:29:18

Use inline, funciona con este tipo de selectores para elementos de lista:

ul li {}

O para ser específico: 

ul[className or name of ID] li[className or name of ID] {}
 0
Author: MiddleKay,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-14 05:32:53