当我有宽度：自动和特定的左右时，为什么将 min-width 设置为计算宽度的值会将元素扩展 2px？答案

【问题标题】：When I have width: auto and specific left and right, why does setting min-width to the value of calculated width expand the element by 2px?当我有宽度：自动和特定的左右时，为什么将 min-width 设置为计算宽度的值会将元素扩展 2px？
【发布时间】：2011-07-11 01:08:31
【问题描述】：

我有一个由宽度和高度设置为 auto 的元素组成的页面，它们的尺寸由 left、right、top 和 bottom 属性定义。当页面被加载时，所有的宽度和高度都被浏览器设置为它们的计算值，它们应该是这样的。但是，当我将元素的最小宽度设置为它们各自的计算宽度时，这些元素中的每一个都会扩展 2 像素。如果我将它们的最小高度设置为等于计算的高度，也会发生同样的情况。我用 jQuery 来做，像这样

element.css('min-width', element.css('width'));

或

element.css('min-width', element.width());

效果和它应该的完全一样，但如果我理解正确发生的事情，就不应该有额外的 2px。使用

element.css('min-width', element.width() - 2);

完全解决了问题，但我不喜欢不理解为什么会有额外的 2px。根据规范，width、min-width 和 max-width 都不应包含 padding、borders 或 margin。

我在 Chrome 和 FF 中进行了测试，两者的行为方式相同。

【问题讨论】：

您是否尝试将边框宽度、内边距和边距设置为 0？请使用jsfiddle.net 创建一个示例并将其添加到您的帖子中。
问题出在您的.width() 上，它获得了我认为的整体宽度或最外层宽度，也许.width() 应该是.css('width') 在某处阅读有关此内容的信息，但请查看两者的区别： ) 应该会给你一个答案
使用 Firebug 查看您的元素。有时您可能会从您甚至没有意识到的父元素中继承某些东西。
我的钱也花在了填充、边距或边框上 - 尝试将所有这些设置为零，看看是否有帮助。
无国界还可以，但是没有意义。 CSS 位置是指元素边距的外边缘，而 CSS 尺寸和最小/最大尺寸不包括填充、边框或边距。如果我有width: auto; left: 0px; right: 200px; border-width: 1px;，计算的宽度应该是 198px，并且将 min-width 和/或 max-width 设置为该值不会改变我元素的尺寸。

标签： javascript jquery html css

【解决方案1】：

您正在测试什么浏览器，您的文档是否处于 quirksmode？p>

element.css('min-width', element.width()); 在标准模式下不应该做任何事情，因为element.width() 返回一个没有 CSS 单位的整数，而min-width 在标准模式下需要一个单位。

所以将您的文档置于标准模式，然后尝试：

element.css('min-width', element.width() + "px");

如果这没有帮助，您需要展示一个工作示例。

【讨论】：

我的 Chrome 说它处于 CSS1Compat 模式，element.css('min-width', element.width()) 和 element.css('min-width', element.css('width')) 的工作方式完全相同。我从来不用添加 'px' 字符串。我认为 jQuery .css() 方法会自动将整数转换为位置和尺寸的像素。