Question

我创建一个元素并将CSS显示设置为inline-block。然后我用firebug测量它的宽度和jquery .width（）它返回相同，我认为这个元素的正确宽度。

但是当我尝试使用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;*/
}

我也尝试将显示设置为阻止，但它不会有帮助。

Answer 1

你的问题是jQuery骗你。它返回四舍五入到最接近整数的宽度。如果实际宽度不是整数，则jQuery返回的数字可能太大或太小。如果它太小，则将宽度设置为该数字意味着文本不适合。

Firefox和IE都进行子像素字形定位，因此一串文本的长度通常不会是整数像素。

您可能想要做的是使用getBoundingClienRect().width来计算宽度。这将为您提供实际宽度，而不会进行舍入。

Answer 2

将显示设置为内联修复它，至少在FF中。

或者，添加另一个像素或2的宽度应该可以修复它 - 这可能是更优选的，因为通常情况下，您应该尝试最小化具有内联样式的元素的数量。

使用CSS设置宽度时出现内联块元素问题

2 个答案: