填充和空白的奇怪问题：Chrome 和 IE 中的 nowrap答案

【问题标题】：Weird issue with padding and whitespace: nowrap in Chrome and IE填充和空白的奇怪问题：Chrome 和 IE 中的 nowrap
【发布时间】：2022-01-14 22:28:15
【问题描述】：

我遇到了非常奇怪的问题。 (http://jsfiddle.net/Fq68D/)

HTML

<div>
    <p>Hello World!</p>
</div>

CSS

div {
    display:inline-block;
}
p {
    background-color:#ccc;
    padding:10%;
    white-space:nowrap;
}

在 Firefox 中，它按预期工作，文本适合 p，并且有填充，

在 Chrome 和 IE 中，文本开箱即用。

这是什么原因造成的？有什么解决方法吗？

【问题讨论】：

这与填充百分比有关。请看stackoverflow.com/questions/9320934/…
如果我加载你的小提琴，我会看到问题，但是当我点击运行时它会自行纠正。
@j08691，很奇怪，当您在 chrome 中检查 p 元素并禁用，然后重新启用填充时，也会发生同样的情况。

标签： html css

【解决方案1】：

将display: inline-block; 添加到p 元素：

http://jsfiddle.net/Fq68D/1/

【讨论】：

谢谢！这解决了 p 的大小问题，但 div 仍然小于 p，当我将 overflow:hidden 添加到 div 时，p 会切断……有什么办法可以解决这个问题吗？这段代码的重点是让 div 显示正确。
当您将% 更改为例如px 单位时，一切都很好。我认为没关系。让我们看看它。 p 有 10% 的填充。需要根据父元素div计算。在这种情况下 div 没有宽度。此宽度基于 p 宽度但没有填充。我希望你明白我的意思:)
您的回答说明了情况，但现在，据我了解，在 Webkit 和 IE 中无法完成我所需要的。我需要的是获得 inline-block 元素，其尺寸必须与其子元素相同，包括子元素的基于百分比的填充（或边距）
我很高兴，我的回答对您有所帮助。周末愉快。

【解决方案2】：

使用width:fit-content; 解决了我的问题

【讨论】：