1

J'ai une table avec une largeur de contrainte et une cellule de table avec une largeur en pourcentage. Dans la cellule j'ai input ou textarea avec style="width:100%", sans marge, padding ou bordure mais avec un peu plus de contenu sans espaces. Pourquoi IE7 et IE6 étendent l'entrée pour correspondre à la longueur du contenu?pourquoi la largeur d'entrée 100% dans la mise en page automatique se développe dans IE7?

L'application de table-layout: fixed à la table n'est pas une option - Je relaie sur les colonnes en expansion pour conserver leur contenu (par exemple, les colonnes avec des étiquettes d'entrée doivent correspondre à la longueur des étiquettes).

L'exemple complet suit. J'ai vérifié que c'est valide rendu en HTML5 en mode standard.

<!doctype html> 
<meta charset="utf-8" /> 
<title>ie6 ie7 input bug</title> 
<style> 

    input, textarea { 
    width: 100%; 
    margin: 0; padding: 0; border: 0; 
    } 

    table { 
    background: yellow; 
    width: 500px; 
    } 

</style> 
<body> 
    <table> 
    <tr> 
     <td style="width: 15%;"> 
     <input value="VeryLongTextWithoutSpaces" /> 
     </td> 
     <td> <br/><br/><!-- give height --> </td> 
    </tr> 
    </table> 
    <br/> <!-- textarea example --> 
    table> 
    <tr> 
     <td style="width: 15%;"> 
     <textarea>VeryLongTextWithoutSpaces</textarea> 
     </td> 
     <td> <br/><br/><!-- give height --> </td> 
    </tr> 
    </table> 
</body> 
+0

Vous n'avez pas vos balises html d'ouverture et de fermeture. (pas que cela résout le problème, juste en disant.) –

+0

duplication possible de [textarea avec 100% de largeur ignore la largeur de l'élément parent dans IE7] (http://stackoverflow.com/questions/33933/textarea-with-100-width- ignores-parent-elements-width-in-ie7) –

+0

@Paul - ma table est utilisée en largeur de largeur de mise en page liquide 100% (cela ne change pas le problème), donc je ne peux pas appliquer la largeur en pixels ' td'. @Grillz les balises sont facultatives - ceci est valide HTML5, vérifié en utilisant le validateur w3 –

Répondre

0

Je trouve que l'application line-height à l'entrée aide si l'entrée ne contient mots. Cela peut être suffisant pour moi (je peux calculer la hauteur de ligne correcte), mais d'autres solutions sont les bienvenues, car elles peuvent être plus adaptées aux autres.

enfin j'ai trouvé la solution ici textarea with 100% width ignores parent element's width in IE7: l'ajout brutal word-break:break-all; est une solution.

Questions connexes