html - CSS 将输入文本包含到 100% 宽度

Question

所以当我像这个例子一样设置输入文本框时，因为它默认有边框和填充，所以宽度将超过 200 像素。

<div style="width:200px; background-color:red;">
    <input type="text" name="fname" style="width:100%;"/>
</div>

我知道我可以通过为输入标签设置一个类并用这个 CSS 标记它来强制文本框适应 200px

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;    
box-sizing: border-box;

是否有更好的方法来使此文本框正确调整大小，即按照我的意愿填充 100%？我不能使用固定尺寸。我使用的是 CSS 主题，因此文本框填充、边距等在编译时是未知的。用户可以即时更改它们。因此，无论文本框的填充、边框和边距是多少，该解决方案都必须有效。

Answer 1

我认为您已经回答了自己的问题。 box-sizing: border-box; 实际上是使元素适合其父元素的唯一 CSS 方法。 css-tricks 在这里详细介绍了这一点。

http://css-tricks.com/box-sizing/

除了使用 javascript 执行一些计算然后修改输入元素之外，我不知道您可以使用任何其他 CSS。