在IE中定位textarea的绝对错误

Question

在IE中定位textarea的绝对错误

我有以下代码:

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

Run Code Online (Sandbox Code Playgroud)

如果你在IE以外的任何其他浏览器中进行测试,你会看到一个红色框和一个textarea填充整个区域,周围有20px的填充.但是在IE(所有版本)中它只会显示一个小的textarea.

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

我如何解决这个问题,让它在IE中运行？jquery也许？

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

Answer 1

and*_*dyb 5

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

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

IE6和IE7至少渲染了<textarea>正确的宽度,所以这height是不正确的.我强烈建议IE6/7保持这种状态,因为它<textarea>是可用的.这里的渐进增强允许现代浏览器以更易于访问的方式呈现框,但旧浏览器仍然可用.做不到这一点,一个快速,简单的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;
}

Run Code Online (Sandbox Code Playgroud)

用于此答案的参考文章

归档时间：	14 年，4 月前
查看次数：	1953 次
最近记录：	14 年，4 月前