我们都谷歌搜索了“设置box-sizing: border-box;的最佳方法”，并从CSS技巧中遇到了有关设置盒子尺寸的有趣文章。
https://css-tricks.com/box-sizing/
如果您还没有阅读，请让我花一些时间。
这是由于灵活性提高而导致的“推荐”方法。
https://css-tricks.com/box-sizing/#aa-universal-box-sizing-with-inheritance
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
虽然您的所有元素都在光DOM中，但今晚我发现一个有趣的错误困扰着我的网站。
如果您的元素被“插入”到自定义元素的阴影dom中，它将“继承”插槽元素的box-sizing。
示例：
<script type="module">
class MyElement extends HTMLElement {
connectedCallback () {
this.attachShadow({ mode: "open" })
// These slots are automatically
// "box-sizing: content-box;"
// so this default slot causes all its children to have
// the same box-sizing properties...
this.shadowRoot.innerHTML = `<slot></slot>`
}
}
window.customElements.define("my-custom-element", MyElement)
</script>
<style>
html {
box-sizing: border-box;
}
*, *:after, *:before {
box-sizing: inherit;
}
</style>
<my-custom-element>
<div>My box sizing is "content-box"</div>
</my-custom-element>
<div>My box sizing is "border-box"</div>
如果您愿意，我也做了一个复制这个问题的代码蛋白。
https://codepen.io/paramagicdev/pen/abRPJjB?editors=1111
“修复”是使用“通用”盒装选择器。
*,*:after,*:before {
box-sizing: border-box;
}
现在，我不知道继承的盒子大小是一个错误，但确实感觉像是一个错误。但是，至少有一个解决方法。我在Firefox，Chrome，Safari和Edge中进行了测试，并在所有4中都得到了相同的结果。修改父插槽元素的box-sizing确实确实像您期望的那样修复了它。