scrollWidth/scrollHeight donner invalide dimensions

Comme il est dit au https://developer.mozilla.org/en/Determining_the_dimensions_of_elements:

Si vous avez besoin de connaître la taille réelle du contenu, indépendamment de la façon dont
il est actuellement visible, vous devez utiliser le scrollWidth et
scrollHeight propriétés.

Donc, je suis en utilisant le scrollWidth et scrollHeight propriétés pour redimensionner l'élément à sa taille réelle (jsfiddle).

HTML:

<textarea>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad brrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</textarea>

JavaScript:

(function ($) {
    $(document).ready(function () {
        $('textarea').css({ 
            width: $('textarea')[0].scrollWidth, 
            height: $('textarea')[0].scrollHeight 
        });
    });
})(jQuery);

Je suppose que si j'ai mis les dimensions de la taille réelle du contenu de l'élément aurait pas de barres de défilement ses dimensions devraient être assez grand pour que le contenu ne déborde. Droit? Il devrait donc être la façon dont vous voyez dans cette image: i.stack.imgur.com/lKxoz.png

Mais il ne fonctionne pas correctement comme vous pouvez le voir sur les images suivantes:

IE: i.stack.imgur.com/JXt0e.png

Chrome: i.stack.imgur.com/emGyG.png

Opéra: i.stack.imgur.com/7MAX5.png

Ma question est quel est le problème avec le scrollWidth et scrollHeight propriétés? Ils me donnent invalide dimensions!

OriginalL'auteur Jack | 2011-09-10