¿Cuál es la trampa para usar bloques en línea?

Question

Los bloques en línea son muy agradables de usar. Imagina esto, quiero centrar un par de divs, en lugar de jugar un poco con margin-auto (que en realidad no funciona cuando queremos centrar varios divs), todo lo que tengo que hacer es dar todos esos divs inline-block y ponerlos en un div contenedor con text-align: centro

quiero decir Sólo estoy dando un ejemplo (que me encontré con) sobre por qué inline-bloques acaba de NMP. Entonces, el bloque en línea nos permite dar a los rellenos y márgenes los elementos en línea, y al mismo tiempo no tenemos que declarar un ancho explícito para esos elementos. ¿Exactamente cuál es la captura aquí? Simplemente no puedo creer que esto sea sin su costo.

Answer 1

El truco es soporte IE6/7 en elementos de nivel de bloque natural. sólo lo hace bien primera vezinline-block si se utiliza en un elemento en línea como a o span PERO ..

Esto se puede solucionar por suerte (inline-bloques son frescos!) mediante el uso de hasLayout - en pocas palabras la redeclarandolos bloques de visualización para ser inline una vez que han tenido hasLayout desencadena en ellos (que la regla original inline-block hace)

el otro problema es que inline-blocks naturalmente debe tener un espacio en blanco entre ellos como palabras en una frase, de hecho lo hacen en la mayoría de los navegadores, pero lo has adivinado no en IE. Entonces, cuando tratas de alinear las cajas perfectamente una al lado de la otra, como si estuvieran flotando, debes permitir este espacio, pero no en IE.

Hay algunas maneras de controlar esta brecha, con word-spacing siendo posiblemente la más lógica, pero no todos los navegadores están de acuerdo en esto, por lo que la forma más estable entre navegadores que he encontrado es utilizar margin-right: -4px; esto significa puede utilizar una segunda solución alternativa para IE6/7 (ya que no tiene estas lagunas) para restablecer su margen derecho en 0 - oh, y el espacio en blanco en el HTML a veces puede arrojar una bola curva también.

Aquí hay un fragmento que traté de probar para incorporar las correcciones de IE con las que parece funcionar bien en el navegador, también prueba el espacio en blanco en el problema de HTML (que no puedo reconstruir de ninguna manera ...pero estaba allí cuando originalmente probado este código hace unas semanas)

CSS:

#wrapper { 
    background: #eee; 
    width: 200px; 
    padding: 1px 0; 
} 

.foo, .bar { 
    display:inline-block; 
    width:98px; 
    background: #eee; 
    color:white; 
    text-align:center; 
    font-size: 30px; 
    font-family: "trebuchet ms", georgia; 
    margin-right: -4px; /* this is the easiest cross-browser fix to zero the whitespace between blocks */ 
} 

.foo, .bar { 
/* THE IE workarounds, must come after the above rule */ 
/* note this is a hack.. the !ie7 part.. 
    you could put this rule set in a conditional 
    or use your favourite method to feed to LTE IE 7 */ 

    display: inline !ie7; 
    margin-right: 0 !ie7; 
} 

.foo {border: 1px solid #000;} 
.bar {border: 1px solid #f00;} 

p {margin: 0;} 
.wrap {margin: 20px 0;} 

HTML

<div id="wrapper"> 
<div class="wrap"> 
    <p class="foo"> Foo </p> 


    <p class="bar"> Bar </p> 
</div> 
</div> 

Answer 2

El soporte de navegador cruzado solía ser deficiente. El soporte es bueno hoy en día, así que a menos que necesites admitir un navegador viejo, hazlo.

Answer 3

los amo también, pero algunos temas son:

Muy extraño comportamiento en IE6 e IE7 (todavía podría ser un gran problema).

Pésimo comportamiento en Firefox 2 (ya no es un gran negocio).

Y, IE6 e IE7 solo puedes cambiar algo que es naturalmente "en línea" (por ejemplo, un lapso) en "bloque en línea", si algo es naturalmente "bloque" (por ejemplo, un div) entonces no puedes.