Comment émuler min-width dans IE8

La documentation IE8 dit qu'il prend en charge la largeur minimale, mais cela ne semble pas fonctionner pour moi.Comment émuler min-width dans IE8

Le code html que je veux avoir une largeur minimale se trouve dans les cellules du tableau.

J'ai vu une autre question ici qui suggérait d'ajouter un div de 1 pixel à chaque cellule, avec un réglage de largeur, mais cela ne fonctionne pas - IE le rend comme 18 pixels de haut, pour une raison quelconque.

Voici le code 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>

Le div "spc" apparaît 18 px de haut!

Bien sûr, si la largeur min a travaillé, je ne aurais pas besoin du 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>

Des indices?

Juste pour rendre cela plus facile, j'ai mis 3 versions différentes de this code on my website.

Source

2011-11-11 Nikki Locke

http://jsfiddle.net/3htmA/

IE8. Votre code fonctionne parfaitement.

Source

2011-11-11 19:26:23 bravedick

C'est bizarre - ça marche là-bas, mais pas sur mon site web. Je me demande quelle est la différence? –

peut-être que quelque chose ne va pas avec doctype? – bravedick

Je n'ai pas de doctype. –

La spécification HTML TABLE utilise COL pour définir les largeurs de colonnes. Voir les spécifications suivante: http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4

Voici un exemple de la façon dont il est utilisé: http://www.htmldog.com/guides/htmladvanced/tables/

Min-largeur sur les cellules de table fonctionne différemment que les éléments de niveau bloc. Les cellules de table sont contrôlées au niveau de la colonne, pas au niveau de la cellule individuelle. Si une taille de cellule donnée augmente ou diminue, la colonne entière sera affectée, sauf si elle est explicitement contrôlée par l'étiquette.

Source

2011-11-11 19:25:10 Joshua

min-largeur définie sur div, pas sur td. tout fonctionne bien. – bravedick

Désolé, je ne comprends pas. Je souhaite que toutes les colonnes de la table aient une largeur minimale. Et je veux que toute la colonne soit affectée. Je ne sais pas pourquoi je voudrais introduire des éléments de col du tout? –

Essayez ceci:

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

Cette expression de largeur est une alternative pour les min-largeur, il censé être une solution de contournement pour les anciennes versions de IE.

Je pense que votre problème est que votre colonne détermine la largeur de l'élément, pas la div.

EDIT:

Vérifiez également si votre navigateur n'est pas en mode de compatibilité.

Source

2011-11-11 19:27:28

Comment émuler min-width dans IE8

Répondre

Questions connexes