在IE中的textarea上定位绝对错误 [英] Position absolute bug on textarea in IE
问题描述
我有以下代码：
<！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（所有版本）中它只会显示一个小的textarea。
我这样做的原因是因为我将使用相同的效果为弹出填充屏幕，因此大小是未知的，这就是为什么我只是指定的位置，而不是使用宽度和高度。
如何解决这个问题，使其工作IE？
只是使用宽度：100％;高度：100％; 不会确认在此实例中工作 问题是< textarea> 是一个元素，并且有一个内在宽度，并且有规则 - CSS2.1：10.3.8 - 它决定了最终的宽度。讽刺的是，Webkit是在这里的故障，Gecko做的正确。
使用这个CSS将使它适用于Firefox3 +，Safari和Opera和IE8 +，这是不幸的，因为你希望它从IE6向上工作。
IE6和IE7至少会以正确的宽度显示< textarea> ，所以它只是 code>这是不正确的。我强烈建议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;
}
此答案的参考文章
I have the following code:
<!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>
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
这篇关于在IE中的textarea上定位绝对错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
