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

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

但是当我尝试使用CSS设置测量的宽度时，内联块元素中的文本断开到另一行。我只是不明白为什么

这个问题与Firefox和IE有关。Im使用FF20和IE9。你可以自己在这里试试

这是我使用的代码。只要在CSS中取消注释宽度，您就会看到

一些测试字符串

p{
填充：3x10px；
字号：28px；
高度：33像素；
颜色：rgb（255、255、255）；
背景色：rgb（88,88,88）；
字体大小：粗体；
显示：内联块；
/*宽度：191px*/
}

---

我也尝试过将显示设置为“阻止”，但没有任何帮助。

将显示设置为“内联”可以修复它，至少在FF中是这样

---

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

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

---

或者，添加另一个像素或2个宽度就可以解决这个问题-这可能更可取，因为一般来说，您应该尽量减少具有内联样式的元素数量。

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

Firefox和IE都进行亚像素字形定位，因此字符串的长度通常不是整数像素

---

您可能要做的是使用

getBoundingClienRect（）.width

计算宽度。这将为您提供实际宽度，无需舍入。

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

Firefox和IE都进行亚像素字形定位，因此字符串的长度通常不是整数像素

---

您可能要做的是使用

getBoundingClienRect（）.width

计算宽度。这将给出实际宽度，无需舍入。

不，抱歉，这不一样。如果将“显示”设置为“内联”，则“宽度”参数不会应用于该元素。此外，我不能只添加像素或2。这不是一个好的解决办法不，对不起，这是不一样的。如果将“显示”设置为“内联”，则“宽度”参数不会应用于该元素。此外，我不能只添加像素或2。这不是一个好的解决办法。不，对不起，这也不太好。我已经更新了JSFIDLE，但是getBoundingClientRect（）函数的大小太大了。我认为增加一个像素将是唯一的选择solution@Sutulustus

getBoundingClientRect（）

包括填充和边框。您可以使用边框框大小，也可以减去填充和边框。不，对不起，这也不太好。我已经更新了JSFIDLE，但是getBoundingClientRect（）函数的大小太大了。我认为增加一个像素将是唯一的选择solution@Sutulustus

getBoundingClientRect（）

包括填充和边框。您可以使用边框框大小调整，也可以减去填充和边框。