Position absolute bug on textarea in IE
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>
加载中,请稍侯......
精彩评论