Html <；输入类型='；文本'/&燃气轮机；及<；textarea>；宽度
在下面的代码中，INPUT和TEXTAREA元素的渲染宽度都比它们应该的要宽。如何将它们限制在div内100%的可用面积Html <；输入类型='；文本'/&燃气轮机；及<；textarea>；宽度,html,css,Html,Css,在下面的代码中，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" l
<!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>
.mywidth{width:100%；}
测试
更新：尽管这些元素上有默认边框，但在IE7中它仍然显示不正确。您可以尝试改用此DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
默认情况下，输入和文本区域都有边框
<style>
.mywidth{
width:100%;
border:0;
}
</style>
.mywidth{
宽度：100%；
边界：0；
}
<style>
.mywidth{ width:100%; border:0; padding-left:0; padding-right:0; }
</style>
.mywidth{width:100%；边框：0；左侧填充：0；右侧填充：0；}
<div style="border: 3px solid green;padding-right:3px; width: 100px;">
它在没有doc声明的情况下工作的原因是浏览器不会将页面呈现为过渡XHTML，而是简单的旧html，它对div等具有不同的呈现方法。@Phil给出了答案，如上所述
顺便说一句，使用确实会显示textarea和输入元素上的默认边框。因此，使用Firebug可能会有所帮助。xhtml严格代码似乎可以在表单中实现这一点。 我只是让输入和文本区域以99%的速度伸展，这似乎是可行的。
试试看。我也有同样的问题。我使用了此处提到的框大小属性： 以下是我的感受：
<style>
.mywidth{
width:100%;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
</style>
.mywidth{
宽度：100%；
-moz框大小：边框框；
-ms框尺寸：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
-ms box sizebox size