Question

我有以下代码：

<!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;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <textarea></textarea>
        </div>
    </body>
</html>

如果你在IE以外的任何其他浏览器中进行测试，你会看到一个红色的框和一个textarea，它用一个20px的填充物填满整个区域。但是在IE（所有版本）中，它只会显示一个很小的文本区域。

我这样做的原因是因为我将对填充屏幕的弹出窗口使用相同的效果，因此尺寸未知，这就是为什么我只指定位置而不是使用宽度和高度。

如何解决此问题以使其在IE中运行？ jquery也许？

只是确认使用width:100%;height:100%;在此实例中不起作用

Answer 1

问题在于<textarea>是一个被替换的元素，并且具有固有的宽度，并且有规则 - CSS2.1:10.3.8 - 用于控制最终宽度。具有讽刺意味的是，Webkit在这里是错误的，Gecko正在做对。

使用这个CSS会使它在Firefox3 +，Safari和Opera以及IE8 +中运行，这是不幸的，因为你希望它从IE6向上工作。

IE6和IE7至少使<textarea>呈现正确的宽度，因此只有height不正确。我强烈建议将IE6 / 7置于此状态，因为<textarea>可用。 Progressive enhancement这里允许现代浏览器以更易于访问的方式呈现框，但旧浏览器仍然可用。如果失败了，可以使用快速，简单的JavaScript函数来设置IE6 / 7的高度，如果必须在所有浏览器中看起来都相同。

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;
}

用于此答案的参考文章

Answer 2

你去了（你需要用textarea宽度百分比“玩”）你可以用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>

Answer 3

<!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>

在IE中定位textarea的绝对错误

3 个答案: