¿Cómo configuro la altura mínima para un div en IE7?

Necesito establecer la altura mínima de un div. En Firefox todo está bien, pero estoy teniendo problemas con IE7, un gran espacio involuntario.¿Cómo configuro la altura mínima para un div en IE7?

ul, il { 
    list-style: none; 
    padding: 0px; 
    margin: 0px; 
} 

    .p_block{ 
     color: #336699; 
     font-size: 14px; 
     min-height: 18px; 
    } 

<ul> 
    <li><a href="#"><div class="p_block">text</div></a></li> 
    <li><a href="#"><div class="p_block">text</div></a></li> 
    <li><a href="#"><div class="p_block">text</div></a></li> 
    <li><a href="#"><div class="p_block">text</div></a></li> 
</ul>

Curiosamente, si elimino padding: 0px; de ul, li, todo funciona bien. ¿Por qué?

Fuente

2010-12-07 user319854

Debería considerar cambiar la respuesta para esto. – Deviljho

uso de este CSS para IE & FF

.p_block{ 
     color: #336699; 
     font-size: 14px; 
     min-height: 18px; 
     height:18px !important; 
    }

Fuente

2010-12-07 10:09:29

@Chinmayee, el problema con esta solución es que la altura del elemento no será capaz de crecer 18px pasado en Firefox y algunos otros.

Una buena solución transversal navegador para min-altura:

{ 
height: auto !important; 
height: 200px; 
min-height: 200px; 
}

Básicamente;
línea # 1: la mayoría de los navegadores modernos entienden importante, por lo tanto, no se sobreponen a la propiedad en la línea siguiente!.

la línea # 2: ya que los navegadores antiguos no saben importante, debe ser una altura establecida. Los navegadores antiguos permitirán que el elemento crezca a menos que exista un desbordamiento: conjunto de propiedades.

línea # 3: Los navegadores modernos entienden minería y la importante!. Por lo tanto, los navegadores modernos entienden la altura: auto y min-height: 200px, mientras que los navegadores más antiguos entienden la altura: 200px; pero permitirá que el elemento de crecer;)

Fuente

2011-02-23 22:49:10 Prof83

Creo que IE6 entiende: importante, pero no de altura mínima, por lo que podría no funcionar en eso. – Muhd

@muhd, sí, pero IE seguirá expandiendo la altura si hay más contenido presente ... (* otro error, que en este caso funciona a nuestro favor *) –

desafortunadamente, esto rompe la capacidad de jQuery de manipular la altura del elemento con el funciones .height() y .css ("altura", VALOR). Hay una solución alternativa, pero me tomó un tiempo encontrarla. Dejaré esto aquí: http://hungred.com/how-to/jquery-javascript-css-important/ – tmsimont

he aquí una solución que prefiero:

.p_block{ 
     color: #336699; 
     font-size: 14px; 
     min-height: 18px; 
}

Entonces para IE utilizar este:

.p_block{ 
     height: 18px; 
}

IE trata altura min-altura, de modo que lo hará crecer.

puede orientar IE mediante la inclusión de un archivo de IE6 & 7 CSS específica como se muestra a continuación (va en la cabeza <>)

<!--[if IE 6]> 
     <link rel="stylesheet" type="text/css" href="css/ie6-hacks.css" /> 
     <script type="text/javascript"> 
      // IE6 Background Hover Flicker Fix 
      try { 
       document.execCommand('BackgroundImageCache',false,true); 
       }catch(ignoreme){ 
      } 
     </script> 
    <![endif]--> 
    <!--[if IE 7]> 
     <link rel="stylesheet" type="text/css" href="css/ie7-hacks.css" /> 
    <![endif]-->

Fuente

2012-02-11 17:09:34

upvoted para el comentario 'IE trata la altura como min-altura para que crezca.'El anser de Prof83 es bastante bueno –

señorita cabo la auto height y el importante y añadir * antes de la height.

esto será sólo entonces puede aplicar a IE7 y abajo.

.p_block{ 
    min-height: 30px; 
    *height: 30px; 
}

Es lo que he utilizado, Internet Explorer 7 no utilizará min-height pero fijará el height a 30px e irá más grande si es necesario.

Fuente

2012-08-28 13:07:40

¿Cómo configuro la altura mínima para un div en IE7?

Respuesta

Cuestiones relacionadas