在 IE 中的 textarea 上定位绝对错误答案

【问题标题】：Position absolute bug on textarea in IE在 IE 中的 textarea 上定位绝对错误
【发布时间】：2011-07-25 10:33:30
【问题描述】：

我有以下代码：

<!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 以外的任何其他浏览器中进行测试，您将看到一个红色框和一个文本区域，该区域以 20 像素的填充填充整个区域。但是在 IE（所有版本）中，它只会显示一个很小的文本区域。

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

如何解决这个问题才能让它在 IE 中运行？也许是 jquery？

只是确认使用width:100%;height:100%;在这种情况下不起作用

【问题讨论】：

我在 Firefox 5 中看到的结果与您在 IE 中描述的结果相同。你到底想达到什么目的？如果您只是希望文本区域符合父 div 的大小，是什么导致您说 100% 的宽度、高度不起作用？
您需要在哪个版本的 IE 中工作？
哦，真不幸。我有 IE8+ 和 Firefox 5+ 的东西，但支持早期的 IE 可能需要一些 JavaScript

标签： css internet-explorer

【解决方案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;
}

用于此答案的参考文章

【讨论】：

【解决方案2】：

你去那里（你需要“玩”文本区域宽度百分比）你可以用溢出隐藏滚动条：隐藏;

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

【讨论】：

问题在于容器会改变大小（在弹出窗口中使用时），因此百分比会导致它变得太大或太小。
你可以尝试给它固定大小

【解决方案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>

【讨论】：