使用CSS設置寬度時使用內嵌塊元素的問題

我創建了一個元素並將CSS顯示設置爲內嵌塊。然後我用firebug和jquery .width（）來測量它的寬度，它返回相同的值，我認爲這個元素的寬度是正確的。使用CSS設置寬度時使用內嵌塊元素的問題

但是，當我嘗試使用CSS設置測量寬度時，內嵌塊元素中的文本會分解到另一行。我只是不明白爲什麼。

此問題與Firefox和IE有關。我使用FF20和IE9。您可以在此嘗試http://jsfiddle.net/BMma2/1/

這是我使用的代碼。只需取消CSS中的寬度，你就會看到。

<p id="test">Some test string</p>

p { 
    padding: 3px 10px; 
    font-size: 28px; 
    height: 33px; 
    color: rgb(255, 255, 255); 
    background-color: rgb(88, 88, 88); 
    font-weight: bold; 
    display: inline-block; 
    /*width: 191px;*/ 
}

我也曾嘗試將顯示設置爲阻止，但它不會幫助。

來源

2013-05-01 Sutulustus

你的問題是，jQuery是騙你。它返回四捨五入到最接近的整數的寬度。如果實際寬度不是整數，jQuery返回的數字可能太大或太小。如果太小，則將寬度設置爲該數字意味着文本不適合。

Firefox和IE都做子像素字形定位，所以文本字符串的長度一般不會是整數個像素。

你可能想要做的是使用getBoundingClienRect().width來計算寬度。這會給你實際的寬度，而不是四捨五入。

來源

2013-05-02 05:45:01

沒有抱歉，這也不是很好。我更新了jsfiddle http://jsfiddle.net/BMma2/4/，但getBoundingClientRect（）函數的大小太大。我認爲添加一個像素將是唯一的解決方案 – Sutulustus 2013-05-02 08:21:31

@Sutulustus'getBoundingClientRect（）'包括填充和邊框。您要麼使用邊界框大小，要麼減去填充和邊框。 – 2013-05-02 15:15:49

將顯示器設置爲內聯可修復它，至少在FF中。

或者，添加另一個像素或2的寬度應該修復它 - 這可能會更受歡迎，因爲一般來說，您應該儘量減少具有內聯樣式的元素的數量。

來源

2013-05-01 16:39:35

沒有遺憾，這是不一樣的。如果將顯示設置爲內聯，則寬度參數不適用於該元素。我也不能只是添加像素或2.這不是一個好的解決方案 – Sutulustus 2013-05-01 17:18:51

使用CSS設置寬度時使用內嵌塊元素的問題

回答

相關問題