将TEXTAREA和INPUT字段设置为TD内的100％宽度会截断右边距

Question

请帮我解决这个问题。我想将INPUT和TEXTAREA元素的宽度设置为100％，以便它们完全适合表格单元格，但我注意到右边框被截断了。

我尝试将INPUT包装在DIV中并将'溢出'设置为'隐藏'，因为我在阅读其他答案但是它不起作用：

<div style="overflow:hidden">
    <input class="input_field" type="text" />
</div>

我也设置了边距和填充，宽度= 95％，但右边框总是被截断，即使它在TD内部也是如此。

请参阅HTML and CSS code at jsFiddle。仔细查看元素的右边界，您将看到它们被截断。将'table border = 0'设置为更好。

Answer 1

使用box-sizing: border-box（以及相应的浏览器特定版本）：

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

请参阅http://jsfiddle.net/trwut/4/

相关阅读：http://paulirish.com/2012/box-sizing-border-box-ftw/

Answer 2

CSS规范声明元素的宽度不包括边框;这可能被认为是错误的，并使像你这样的场景中的宽度变得复杂。

有趣的是，Internet Explorer违反了这个CSS规范并使用了所谓的盒子模型（包括边框的宽度） - 这在当时引起了一些麻烦，但现在可以使用以下CSS应用于其他浏览器：

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

为了支持我的回答（因为删除了upvote），您可以阅读以下文章：

Jeff Kaufman的

Revenge of the IE Box Model