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

时间:2021-03-22 12:35:01

I have a page made of elements with width and height set to auto and their dimensions defined with left, right, top and bottom properties. When the page is loaded, all widths and heights are set to their calculated values by the browser, as they should be. However, when I set min-width of the elements to their respective calculated widths, each of those elements is expanded by 2px. The same happens if I set their min-height to be equal to the calculated height. I do it with jQuery, like this

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

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

or

要么

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

The effect is exactly the same as it should be, but there should not be the extra 2px if I understand what's happening correctly. Using

效果与应有的完全相同,但如果我理解正确发生的事情,就不应该有额外的2px。运用

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

completely solves the problem but I don't like not understanding why there are the extra 2px. According to specifications, neither width nor min-width nor max-width should include padding, borders or margins.

完全解决了这个问题,但我不喜欢不理解为什么会有额外的2px。根据规格,宽度,最小宽度和最大宽度都不应包括填充,边框或边距。

I've tested in Chrome and FF and both behave the same way.

我已经在Chrome和FF中进行过测试,两者的行为方式相同。

1 个解决方案

#1


0  

What browser are you testing and can it be that your document is in quirksmode?

你正在测试什么浏览器,你的文档是否在quirksmode中?

element.css('min-width', element.width()); shouldn't be doing anything in standards mode, because element.width() returns an integer without a CSS unit, and min-width requires a unit in standardsmode.

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

So put your document in standards mode and then try:

因此,将您的文档置于标准模式,然后尝试:

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

If that doesn't help you'll need to show a working example.

如果这没有帮助,你需要展示一个有效的例子。

#1


0  

What browser are you testing and can it be that your document is in quirksmode?

你正在测试什么浏览器,你的文档是否在quirksmode中?

element.css('min-width', element.width()); shouldn't be doing anything in standards mode, because element.width() returns an integer without a CSS unit, and min-width requires a unit in standardsmode.

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

So put your document in standards mode and then try:

因此,将您的文档置于标准模式,然后尝试:

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

If that doesn't help you'll need to show a working example.

如果这没有帮助,你需要展示一个有效的例子。