Equivalente a la pantalla div en línea bloque para IE8, IE7 y navegadores anteriores

Question

Esta es una pregunta bastante genérica acerca de la compatibilidad entre navegadores.

En varios puntos de un diseño, actualmente estoy trabajando en la única manera de lograr el diseño y el estilo que quiero (sin recurrir al uso de imágenes) es utilizar la opción de estilo css display:inline-block. Sin embargo, esto no es compatible con IE8 y otros navegadores más antiguos y esto da como resultado que mi diseño se rompa.

Así que hay dos partes en mi pregunta 1 - ¿Hay algún método para lograr un efecto similar o equivalente para IE8? 2 - Si no es así, ¿qué mejor puedo hacer que mi diseño se degrade sin problemas?

Para su referencia, aquí hay un ejemplo de dónde esto se está utilizando en mi diseño.

<div style="width:20px; height:20px; display:inline-block; background-color:rgb(200,120,120); margin-right:10px;"></div>Direct

Es un bloque de color de píxeles 20x20 para explicar los colores en un gráfico.

Más generalmente, este problema surge cada vez que quiero un mayor formato & control de diseño sobre un determinado bit de texto, etc. dentro de un cuerpo de texto.

En el diseño en el que estoy trabajando voy a dejar de lado el soporte para los tipos de navegadores anteriores de todos modos ya que depende en gran medida del elemento canvas. Sin embargo, pensé que sería una buena pregunta, ya que me he topado con el problema varias veces.

Gracias

Answer 1

Aquí es un buen recurso que cubre este tema: http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/

Básicamente es decir, tiene un disparador llamado "hasLayout". Activar esto le permitirá usar display:inline-block en un elemento de nivel de bloque (de manera predeterminada, IE solo permite el bloqueo en línea en elementos nativos en línea).

Además, la versión anterior de Fire Fox tampoco era compatible con el bloque en línea, pero tenía un valor de "pila en línea" (moz-inline-stack).

Aquí está, que yo sepa, la mejor manera de conseguir un cross-browser display:inline-block:

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

Answer 2

uso este código

*display: inline; 
*vertical-align: middle; 

Answer 3

Como dada here:

IE admite bloque en línea, pero solo para elementos que son nativamente en línea. Por lo tanto, si usted realmente desea utilizar inline-block, que está restringido a vanos y Strong y ems ...

Sí, no es lógico, porque normalmente no importa si use div o span ... pero recuerde - esto es IE :)

Así que simplemente cambie <div> por y listo!

Answer 4

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

puede agregar bloque en línea para otro navegador pero para IE puede agregar estilo con *. solo funciona en, por ejemplo,