internet-explorer - 使用 CSS 设置宽度时内联 block 元素出现问题

Question

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

但是当我尝试使用 CSS 设置测量宽度时，内联 block 元素内的文本会换行。我只是不明白为什么。

此问题与 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 都进行亚像素字形定位，因此文本字符串的长度通常不会是整数个像素。

您可能想要做的是使用 getBoundingClientRect().width 来计算宽度。这将为您提供实际宽度，无需四舍五入。