html - 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> 上的属性(property)至 border-box强制width属性定义所有元素的总宽度，包括元素的边框。

您需要对该属性做一些研究，因为它在所有浏览器中的声明方式不同(例如 -moz-box-sizing、-ms-box-sizing、-webkit-box-sizing 等)。 Here is the QuirksMode page on box-sizing 供您浏览。

box-sizing fix 适用于 Firefox，但我还没有在其他浏览器中测试过它。它们中的一些，特别是在怪异/传统模式下，也可能对元素应用边距。如果是这种情况，那么您需要做的就是使用 CSS 删除边距(AFAIK，box-sizing 没有广泛支持的扩展到边距的选项 - 只有内容、填充和边框的选项).

我建议针对此修复进行具体说明，并且仅删除左/右边距(即 margin-left: 0; margin-right: 0; )而不是完全删除边距(即 margin: 0; )以保留任何上/下边距(如果它们存在)(和如果你想保留它们)。我知道 Firefox 在顶部/底部应用 1px 边距，其他浏览器也可能如此。