Position absolute bug on textarea in IE_问答_开发者

开发者 https://www.devze.com 2023-03-22 21:25 出处：网络

I have the following code: <!doctype htm开发者_如何学JAVAl> <html lang=\"en\"> <head>

I have the following code:

<!doctype htm开发者_如何学JAVAl>
<html lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
            *
            {
                margin: 0;
                padding: 0;
            }
            div#container
            {
                position: relative;
                top: 100px;
                left: 100px;
                width: 640px;
                height: 480px;
                background: #ff0000;
            }
            textarea
            {
                position: absolute;
                top: 20px;
                left: 20px;
                right: 20px;
                bottom: 20px;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <textarea></textarea>
        </div>
    </body>
</html>

If you test this in any other browser than IE you will see a red box and a textarea that fills the entire area with a 20px padding around it. However in IE (all versions) it will just show a tiny textarea.

The reason I am doing it this way is because I will be using the same effect for a popup that fills the screen and therefore the size is unknown which is why I just specify the position rather than using width and height.

How do I fix this to get it working in IE? jquery perhaps?

Just to confirm using width:100%;height:100%; will not work in this instance

The problem is that <textarea> is a replaced element and has an intrinsic width and there are rules - CSS2.1:10.3.8 - that govern what the eventual width will be. Ironically, Webkit is at fault here and Gecko is doing it right.

Using this CSS will make it work in Firefox3+, Safari and Opera and IE8+ which is unfortunate as you want it working from IE6 upwards.

IE6 and IE7 at least render the <textarea> at the correct width, so it is just the height that is incorrect. I strongly suggest that IE6/7 be left in this state since the <textarea> is usable. Progressive enhancement here allows modern browsers to render the box in a more accessible way but old browsers are still usable. Failing that, a quick, simple JavaScript function could be used to to set the height for IE6/7 if it must look the same in all browsers.

div#container {
    position:relative;
    top:100px;
    left:100px;
    width:600px;
    height:440px;
    background: #ff0000;
    padding:20px;
}
textarea {
    position:relative;
    width:100%;
    height:100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

Reference articles used for this answer

Absolutely positioned textareas
Firefox / IE textarea sizing quirk - workarounds?

there you go (you need to "play" with the textarea width percentage) you can hide the scrollbar with overflow:hidden;

   <!doctype html>
<html lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
            *
            {
                margin: 0;
                padding: 0;
            }
            div#container
            {
                position: relative;
                top: 100px;
                left: 100px;
                width: 640px;
                height: 480px;
                background: #ff0000;
            }
            textarea
            {
                position: absolute;
                top: 20px;
                left: 20px;
                right: 20px;
            bottom: 20px;
            width:93%;
height:92%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <textarea></textarea>
        </div>
    </body>
</html>

<!doctype html>
<html lang="en">
    <head>
        <title>Test</title>
        <style type="text/css">
            *
            {
                margin: 0;
                padding: 0;
            }
            div#container
            {
                position: relative;
                top: 100px;
                left: 100px;
                width: 640px;
                height: 480px;
                background: #ff0000;
            }
            .box
            {
                position: absolute;
                top: 20px;
                left: 20px;
                right: 20px;
                bottom: 20px;
            }
            textarea
            {

                overflow-y: scroll;
                width:100%;
                height:100%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div class="box">
                <textarea></textarea>
            </div>
        </div>
    </body>
</html>