在下面的代码中,INPUT和TEXTAREA元素都比它们应该更宽.如何将它们限制在div中可用区域的100％？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style>
.mywidth{ width:100%; }
</style>
</head>
<body>
<div style="border: 3px solid green; width: 100px;">
<input class="mywidth" ><br />
<textarea class="mywidth"></textarea><br />
<div style="background-color: yellow;" class="mywidth">test</div>
</div>
</body>
</html>
注意：如果我删除了DOCTYPE,它会按预期渲染,INPUT,TEXTAREA和内部DIV的宽度都相同,不会超出包含的DIV.
更新：除了这些元素的默认边框外,它仍然在IE7中显示不正确.
解决方法
输入和textareas默认都有边框
<style>
.mywidth{
width:100%;
border:0;
}
</style>
将呈现容器中的所有元素.
更新
IE在每个元素上也有左右填充,后面的css适合FF3,FF2,Safari 3,IE6和IE7中容器内的所有元素.
<style>
.mywidth{ width:100%; border:0; padding-left:0; padding-right:0; }
</style>
但是,不要忘记您可能需要一个边框,也可能需要填充,以使字段对用户正常显示.如果您自己设置边框和填充,那么您将知道在浏览器之间,容器的宽度和您需要为input / textarea元素提供的宽度之间的区别.
