Textarea溢出div，即使设置了框大小:border-box
Textarea溢出div，即使设置了框大小:border-box
提问于 2013-03-14 08:12:01
我正在尝试让一个文本区域扩展到适合其父目录的100%，但我在IE9中遇到了问题。下面是整个页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#wrap {
width: 50%;
height: 100px;
background:#fee; border:3px double #f99;
}
textarea {
background:#efe;
width: 100%;
height: 100%;
padding: 10px;
border:0; margin:0;
box-sizing:border-box;
overflow: auto;
display: block;
}
</style>
</head>
<body>
<div id="wrap"><textarea>hello world</textarea></div>
</body>
</html>这张图显示了结果。result http://polybemani.net/uploader/files/1/cssboxsizing.png
它在Chrome上显示得很好，但在IE9和IE10上就不行了。我不明白的是，使用完全相同的代码，它在jsfiddle中工作得很好。怎么回事？
回答 1
Stack Overflow用户
发布于 2013-03-15 01:28:29
答案是：
添加
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">到head标签修复了这个问题。显然IE是在怪癖模式下。你学得越多！
希望这能帮助下一个遇到这个问题的人！
完整的源代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title></title>
<style type="text/css">
#wrap {
width: 50%;
height: 100px;
background:#fee;
border: 3px solid red;
}
textarea {
background:#efe;
padding: 10px;
border:0;
margin:0;
box-sizing:border-box;
overflow: auto;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="wrap"><textarea>hello world</textarea></div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15398913
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号