在下面的代码中,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中显示不正确.
bma*_*pin 12
我有同样的问题.我使用了这里提到的box-sizing属性:
当CSS中存在填充时,如何使TextArea 100%宽度而不会溢出？
这就是我的样子:
<style>
.mywidth{
width:100%;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
</style>
输入和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元素提供的宽度之间的区别.
| 归档时间： |
|
| 查看次数： |
17600 次 |
| 最近记录： |