Come emulare la larghezza minima in IE8

La documentazione IE8 dice che supporta la larghezza minima, ma non sembra funzionare per me.Come emulare la larghezza minima in IE8

L'html che voglio essere una larghezza minima è nelle celle della tabella.

Ho visto un'altra domanda qui che suggeriva di aggiungere un div di altezza di 1 pixel a ogni cella, con un'impostazione di larghezza, ma che non funziona - IE lo rende alto 18 pixel, per qualche motivo.

Ecco il codice 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>

Il div "SPC" appare 18 px alto!

Naturalmente, se min-width ha funzionato, non avrei bisogno del 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>

Degli indizi?

Solo per semplificare, ho inserito 3 diverse versioni di this code on my website.

fonte

2011-11-11 Nikki Locke

http://jsfiddle.net/3htmA/

IE8. il tuo codice funziona perfettamente.

fonte

2011-11-11 19:26:23 bravedick

Questo è strano - funziona lì, ma non sul mio sito web. Mi chiedo quale sia la differenza? –

forse qualcosa non va con doctype? – bravedick

Non ha un doctype. –

La specifica TABLE HTML utilizza COL per definire le larghezze delle colonne. Vedere la seguente specifica: http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4

Ecco un esempio di come si utilizza: http://www.htmldog.com/guides/htmladvanced/tables/

Min-width su celle di tabella funziona diversamente rispetto elementi di blocco. Le celle di tabella sono controllate a livello di colonna, non a livello di singola cella. Se una determinata dimensione della cella aumenta o diminuisce, l'intera colonna sarà interessata, a meno che non sia esplicitamente controllata dal tag.

fonte

2011-11-11 19:25:10 Joshua

larghezza minima impostata su div, non su td. tutto funziona bene. – bravedick

Scusa, non capisco. Voglio che tutte le colonne della tabella abbiano una larghezza minima. E voglio che l'intera colonna sia interessata. Non sei sicuro del motivo per cui vorrei introdurre gli elementi col? –

Prova questo:

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

questa larghezza espressioni è un'alternativa per min-width, si suppone che sia una soluzione per le vecchie versioni di IE.

Penso che il tuo problema è che la tua colonna sta determinando la larghezza dell'elemento, non il div.

EDIT:

Controlla anche se il browser non è in modalità di compatibilità.

fonte

2011-11-11 19:27:28

Come emulare la larghezza minima in IE8

risposta

Problemi correlati