额外一个像素，宽度为 100%答案

【问题标题】：One pixel extra with a width of 100%额外一个像素，宽度为 100%
【发布时间】：2012-04-16 00:52:20
【问题描述】：

我得到了一个 680 像素宽的文本区域。这需要变得流畅，所以我使用百分比。

百分比是完美的 100% 宽度，但渲染的像素似乎比应有的多 1 个像素。

http://jsfiddle.net/XXshn/2/

【问题讨论】：

我真的不明白你的文本区域是如何流动的，因为它的父级有固定的宽度，最终文本区域也将是固定的宽度。大约一个像素的差异是因为浏览器有他的欧文算法在评估填充百分比到像素后将十进制数字四舍五入。
在我创建的这个例子中，父母只是一个“固定”的持有人。他们为什么还要四舍五入？
94.10029498525074 % of 680 px = 639.88.2006，但浏览器将其设为 639px 而不是 640px。您的百分比不会达到完美的 100，因为除非您更改 box-model，否则边框也会作为宽度的一部分进行评估。
边框在盒子模型里面，这确实是我的问题。谢谢！
当我得到必要的代表时我会这样做：x

标签： css width rendering pixel percentage

【解决方案1】：

这会有什么问题：

textarea {
border: 1px solid #333333;
background: #ececec;
margin: 0;
outline: 0;
height: 100px;
padding: 20px; /*  */
width: 640px; /* 680px - 2 * 20 */
resize: none; }

【讨论】：

例如，当放入较小的 div 时，我需要它进行缩放，因此需要百分比。
好的，所以你的问题是textarea上的边框，因为它用px而不是%表示，当你改变外部div的大小时它永远不会正确。
将边框从内部元素移动到外部元素：我在这里修改了您的示例：jsfiddle.net/b8yxP