Textarea宽度与包含div不对齐

Question

我想知道为什么textarea拒绝与包含div保持一致？

<!-- the textarea pokes out-->
<div style="border:1px solid #ccc; width:300px">
  <textarea style="width:100%"></textarea>
</div>

这使我难以确保元素的对齐

Answer 1

默认情况下，<textarea>元素会在其周围呈现边框。这样做的问题是，当您在元素上设置width属性时，您只需设置内容宽度，而不是总宽度。元素的总宽度为（宽度+边框+填充+边距），因此当您将width上的<textarea>设置为100％时，它会将内容宽度设置为300px，但总宽度是300px加上默认边框，这导致它超过<div>的300px宽度。

您可以使用填充/边距在<div>中容纳这些边框，但更好的解决方案是将box-sizing上的<textarea>属性设置为border-box强制width属性定义所有内容的总宽度，包括元素的边框。

您需要对该属性进行一些研究，因为它在所有浏览器中的声明都不同（例如-moz-box-sizing，-ms-box-sizing，-webkit-box-sizing等。 Here is the QuirksMode page on box-sizing让你透露一下。

box-sizing修复适用于Firefox，但我没有在其他浏览器中测试过。有些可能，特别是在怪癖/遗留模式下，也可能对元素应用边距。如果是这种情况，那么您需要做的就是使用CSS删除边距（AFAIK，box-sizing没有广泛支持的扩展到边距的选项 - 只有内容，填充，和边界）。

我建议具体使用此修复，只删除左/右边距（即margin-left: 0; margin-right: 0;）而不是完全删除边距（即margin: 0;）以保留任何顶部/底部边距它们存在（如果你想保留它们）。我知道Firefox在顶部/底部应用了1px的边距，而其他浏览器也可以。

Answer 2

我在Firefox，Chrome和IE中尝试过，他们都正确地展示了它。我怀疑你的DIV是在另一个容器内，这导致了问题。

请添加部分代码。

Answer 3

textarea可能会申请保证金。试试这个：

<div style="border:1px solid #ccc; width:300px">
  <textarea style="width:100%; margin: 0;"></textarea>
</div>

Answer 4

<div style="border:1px solid #ccc; width:300px">
  <textarea style="width:100%"></textarea>
</div>

在Firefox 3.6.10，Internet Explorer 8和Google Chrome上进行了测试。

但是，也许不是把它放在DIV中，你也可以试试这个：

<textarea style="border:1px solid #ccc; width:300px"></textarea>

哪个有与原始代码相同的外观。