将 TEXTAREA 和 INPUT 字段设置为 TD 内的 100% 宽度会截断右边距
请帮我解决这个问题。我想将 INPUT 和 TEXTAREA 元素的宽度设置为 100%，以便它们完全适合表格单元格，但我注意到右边框被截断。
我尝试将 INPUT 包装在 DIV 中，并将“溢出”设置为“隐藏”，因为我在其他答案中读到，但它不起作用：
<div style="overflow:hidden">
<input class="input_field" type="text" />
</div>
我还设置了边距和填充，宽度= 95％，但右边框总是被截断即使它位于 TD 内。
请参阅 jsFiddle 上的 HTML 和 CSS 代码。仔细观察元素的右边框，您会发现它们被截断了。设置“table border=0”以看得更清楚。
Please help me fix this issue. I would like to set the width of INPUT and TEXTAREA elements to 100% so that they entirely fit the table cell but I noticed that the right border is truncated.
I tried to wrap the INPUT inside a DIV and set 'overflow' to 'hidden' as I read on other answers but it does not work:
<div style="overflow:hidden">
<input class="input_field" type="text" />
</div>
I also set margins and paddings, and width=95% too but the right border is always truncated even if it is well inside the TD.
Please see the HTML and CSS code at jsFiddle. Look carefully to the right border of the elements, you will see they are truncated. Set 'table border=0' to see better.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
使用
box-sizing: border-box（以及相应的浏览器特定版本）：请参阅 http://jsfiddle.net/trwut/4/
相关阅读：http://paulirish.com/2012/box-sizing-border-box-ftw/
Use
box-sizing: border-box(and the corresponding browser-specific versions):See http://jsfiddle.net/trwut/4/
Related reading: http://paulirish.com/2012/box-sizing-border-box-ftw/
CSS规范规定元素的宽度不包括边框；这可能会被认为是错误的，并且会使像您这样的场景中的宽度变得复杂。
有趣的是，Internet Explorer 违背了这个 CSS 规范，并使用了所谓的盒模型（包括边框的宽度）——这在当时引起了头痛，但现在可以使用以下 CSS 应用于其他浏览器
：答案（因为赞成票已被删除），您可以阅读以下文章：
复仇IE盒子模型，作者：Jeff Kaufman
The CSS specification states that the width of an element does not include the border; which could be argued as wrong and complicates the width in scenarios like yours.
Funnily enough, Internet Explorer went against this CSS specification and used what was known as the box model (width including the border) - which caused a headache at the time, but can now be applied to other browsers using the following CSS:
To support my answer (as the upvote was removed), you can read the following article:
Revenge of the IE Box Model by Jeff Kaufman