0

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

但是，当我尝试使用 CSS 设置测量宽度时，inline-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;*/
}

我也尝试将显示设置为阻止，但它无济于事。

4

2 回答 2

3

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

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

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

于 2013-05-02T05:45:01.447 回答
1

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

或者，添加另一个像素或 2 个宽度应该可以修复它 - 这可能更可取，因为通常，您应该尽量减少具有内联样式的元素的数量。

于 2013-05-01T16:39:35.520 回答