<input type ='text'/>和<textarea>宽度

问题在下面的代码中，INPUT和TEXTAREA元素均渲染得比他们应该宽。我如何限制它们在div内可用区域的100％？<input type ='text'/>和<textarea>宽度

<!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中呈现不正确。

来源

2008-11-03 Larsenal

输入和文字区域都有边界默认

<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元素的宽度之间的区别。

来源

2008-11-03 18:19:15 philnash

你试过了吗？检查IE7。它仍然咬入包含div的绿色边框。 – Larsenal 2008-11-03 18:27:45

你可以尝试使用这个DOCTYPE，而不是

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

来源

2008-11-03 18:17:48

似乎没有解决它。 – Larsenal 2008-11-03 18:20:04

没有DOCTYPE将强制浏览器进入怪癖模式，使用旧的，不正确的框模型，它不会将边框作为宽度的一部分。 – philnash 2008-11-03 18:23:01

或...`<！DOCTYPE html>`：P – 2010-07-22 13:26:41

添加“padding-right：3px;”所以它读作：

<div style="border: 3px solid green;padding-right:3px; width: 100px;">

因为你已经添加了一个边框的div也算作div的内部空间。

其作品，未经DOC声明的原因是，该浏览器不显示网页作为过渡XHTML，但普通的老式HTML中有div的等

来源

2008-11-03 18:23:08

@Phil有答案，上面有不同的渲染方法。

顺便说一句，使用Firebug确实显示textarea和input元素的默认边框。所以，使用Firebug可能会有所帮助。

来源

2008-11-03 18:23:40

xhtml严格的代码似乎是这样做的形式。我只是把输入和textareas拉伸到99％，这似乎工作。试试看。

来源

2009-07-18 15:03:20

我有这个相同的问题。我曾经在这里提到的箱集束性：

How can I make a TextArea 100% width without overflowing when padding is present in CSS?

下面是它看起来像我：

<style> 
    .mywidth{ 
    width:100%; 
    -moz-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    } 
</style>

来源

2010-07-22 13:24:40 bmaupin

<input type ='text'/>和<textarea>宽度

回答

相关问题