2010-05-25 11 views
0

essayer ce code dans Chrome, Firefox et IE:Firefox/IE textarea dimensionnement quirk - solutions de contournement?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Textarea problem</title> 
<style type="text/css"> 
html, body { 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
    border: 0; padding: 0; margin: 0; 
} 

#container { 
    position: absolute; 
    top: 4px;bottom: 4px; 
    right: 4px;left: 4px; 
    background-color: grey; 
} 

#ta { 
    position: absolute; 
    bottom: 0; right: 0; 
    top: 0; left: 0; 
    /*width: 100%; height: 100%;*/ 
    border: black 4px solid; padding: 0; margin: 0; 
    background-color: orange; 
    padding: 8px; 
} 
</style></head> 
<body> 

<div id="container"> 
    <textarea id="ta" >This textarea should fill the window. But FF and IE leave the dimensions at the defaults! This happens when the corner offsets are specified; not when width and height are specified. But 100% width and height do not play with the box model when using padding and borders. </textarea> 
</div> 

</body> 
</html> 

Je remarque cela se produit pour les entrées aussi bien. Ils ne répondent pas comme les éléments de bloc ordinaires aux dimensions impliquées par le haut/bas et la gauche/droite.

Mon contournement consiste à placer la bordure et le remplissage sur le conteneur et à définir la position de la zone de texte sur relative et la largeur/hauteur à 100%. Mais ce n'est pas parfait, parce que les barres de défilement du textarea sont alors dans le remplissage, ce qui est inacceptable (pour moi) du point de vue de l'interface utilisateur.

Y a-t-il quelque chose qui me manque? Comment puis-je faire en haut/à droite/en bas/à gauche pour les textareas dans FF/IE?

+0

Je ne sais pas exactement quelle est la question. Qu'est-ce que vous essayez précisément d'accomplir avec ceci? EDIT: Ahh ok, je vois. Juste téléchargé chrome. :) – edl

Répondre

1

Dans quelles versions de IE doit-il fonctionner?

Si vous modifiez le positionnement de #ta-relative et de définir sa largeur et sa hauteur 100% vous pouvez ajouter

-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 

pour le faire fonctionner dans IE8 +, Firefox 3.0+ et Safari et Opera aussi.

Les propriétés top/right/bottom/left ne sont plus vraiment nécessaires.