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%它设置内容宽度到300像素,但总宽度是300个像素以及默认边界,它导致超过300px的宽度<div>.

您将可以在满足这些边框<div>使用填充/利润率,但更好的解决办法是设置box-sizing的财产<textarea>,以border-box迫使width属性来定义一切的总宽度直至并包括该元素的边界.

你需要做一些研究,物业,因为它在所有的浏览器(如申报不同-moz-box-sizing,-ms-box-sizing,-webkit-box-sizing,等).这是QuirksMode页面box-sizing供您查看.

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

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