Cómo emular el ancho mínimo en IE8

La documentación de IE8 dice que admite min-width, pero no parece funcionar para mí.Cómo emular el ancho mínimo en IE8

El html Quiero ser un ancho mínimo en las celdas de la tabla.

Vi otra pregunta aquí que sugería agregar un div de altura de 1 píxel a cada celda, con un ajuste de ancho, pero eso no funciona - IE lo muestra como 18 píxeles de alto, por alguna razón.

Aquí está el código html:

<html> 
<head> 
<script src="jquery.js" type="text/javascript"></script> 
<style type="text/css"> 
table.keyboard div.key { 
    height: 50px; 
    font-size:50px; 
    border: 5px outset gray; 
    min-width: 60px; 
    text-align: center; 
} 
table.keyboard div.spc { 
    height: 1px; 
    width: 60px; 
    background-color: green; 
} 

table.keyboard td:hover { 
    background-color: lightblue; 
} 
table.keyboard { 
    border: 3px inset blue; 
} 
</style> 
</head> 
<body> 
<div id="body"> 
<div>Here is some stuff</div> 
<table class='keyboard'> 
    <tbody> 
     <tr> 
      <td><div class='key'>1</div><div class='spc'></div></td> 
      <td><div class='key'>2</div><div class='spc'></div></td> 
      <td><div class='key'>3</div><div class='spc'></div></td> 
      <td><div class='key'>4</div><div class='spc'></div></td> 
      <td><div class='key'>5</div><div class='spc'></div></td> 
     </tr> 
    </tbody> 
</table> 
</div> 
</body> 
</html>

aparece 18 píxeles de alto El "SPC" div!

Por supuesto, si min-width trabajó, no necesitaría el div ...

<table class='keyboard'> 
    <tbody> 
     <tr> 
      <td><div class='key'>1</div></td> 
      <td><div class='key'>2</div></td> 
      <td><div class='key'>3</div></td> 
      <td><div class='key'>4</div></td> 
      <td><div class='key'>5</div></td> 
     </tr> 
    </tbody> 
</table>

Alguna pista?

Solo para hacerlo más fácil, he puesto 3 versiones diferentes de this code on my website.

Fuente

2011-11-11 Nikki Locke

http://jsfiddle.net/3htmA/

IE8. tu código funciona perfecto

Fuente

2011-11-11 19:26:23 bravedick

Eso es extraño: funciona allí, pero no en mi sitio web. Me pregunto cuál es la diferencia? –

tal vez algo malo con doctype? – bravedick

No tiene un doctype. –

La especificación HTML TABLE utiliza COL para definir los anchos de columna. Ver la especificación siguiente: http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4

Aquí hay un ejemplo de cómo se usa: http://www.htmldog.com/guides/htmladvanced/tables/

Min-ancho de las celdas de tabla funciona de manera diferente que los elementos en bloque. Las celdas de la tabla se controlan en el nivel de columna, no en el nivel de celda individual. Si un tamaño de celda dado aumenta o disminuye, la columna entera se verá afectada, a menos que esté explícitamente controlada por la etiqueta.

Fuente

2011-11-11 19:25:10 Joshua

ancho mínimo establecido en div, no en td. todo funciona bien – bravedick

Lo siento, no entiendo. Quiero que todas las columnas de la tabla tengan un ancho mínimo. Y quiero que toda la columna se vea afectada. ¿No estoy seguro de por qué querría introducir elementos col en absoluto? –

Prueba esto:

table.keyboard .key 
{ 
min-width:60px; 
width: expression(this.width < 60 ? 60: true); 
}

esta anchura expresiones es una alternativa para min-anchura, se supone que es una solución para las versiones anteriores de IE.

Creo que su problema es que su columna determina el ancho del elemento, no el div.

EDIT:

también comprobar si su navegador no está en modo de compatibilidad.

Fuente

2011-11-11 19:27:28

Cómo emular el ancho mínimo en IE8

Respuesta

Cuestiones relacionadas