當我有寬度：自動和特定的左和右，爲什麼設置最小寬度的計算寬度的值擴大元素2px？

我有一個頁面由寬度和高度設置爲auto的元素組成，它們的尺寸用左，右，上，下屬性定義。加載頁面時，瀏覽器將所有寬度和高度設置爲其計算值，因爲它們應該是。但是，當我將元素的最小寬度設置爲各自計算的寬度時，每個元素都會擴展2px。如果我將其最小高度設置爲等於計算的高度，則會發生相同的情況。我這樣做與jQuery，這樣當我有寬度：自動和特定的左和右，爲什麼設置最小寬度的計算寬度的值擴大元素2px？

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

或

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

的影響是因爲它應該是完全一樣的，但不應該有額外的2px如果我明白髮生了什麼正確。使用

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

完全解決了這個問題，但我不喜歡不理解爲什麼還有額外的2px。根據規範，寬度，最小寬度和最大寬度都不應包含填充，邊框或邊距。

我已經在Chrome和FF中測試過，兩者的行爲方式都是一樣的。

來源

2011-03-08 Miloš Rašić

您是否嘗試將邊框寬度，填充和邊距設置爲0？請使用http://jsfiddle.net/創建一個示例，並將其添加到您的帖子中。 – zihotki

問題出在你的'.width（）'獲得了整個寬度或者我認爲的最外部寬度，也許'.width（）'應該是'.css（'width'）'在這個地方讀一下，但看看兩者的區別:)應該給你一個答案 – Val

看看你的元素使用Firebug。有時候，你可能會從父元素繼承一些你甚至沒有意識到的東西。 – konung

你正在測試什麼瀏覽器，它可能是你的文檔在quirksmode？

element.css('min-width', element.width());不應該在標準模式下做任何事情，因爲element.width()返回一個沒有CSS單位的整數，min-width需要標準模式中的單位。

所以把你的文檔中的標準模式，然後嘗試：

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

如果它不能幫助你需要顯示的工作示例。

來源

2011-03-08 15:49:15 RoToRa

我的Chrome表示它處於CSS1Compat模式和'element.css（'min-width'，element.width（））''和'element.css（'min-width'，element.css（'width'））''工作完全一樣。我從來不需要添加'px'字符串。我認爲jQuery .css（）方法自動將整數轉換爲位置和維度的像素。 –

當我有寬度：自動和特定的左和右，爲什麼設置最小寬度的計算寬度的值擴大元素2px？

回答

相關問題