css - css 中的 bulletproof width hack 将涵盖所有内容，包括 Safari？

Question

我一直在使用这个类来适本地拉伸(stretch) div 和输入以适应可用空间，而不会因为填充而溢出，就像 -moz-available 那样。

它适用于 Firefox、Chrome、Opera。

不幸的是，Safari 似乎是唯一无法与它相处的浏览器。

.width {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: -moz-available;
width: -webkit-fill-available;
}

有什么我可以添加到这里以使其与 Safari 一起工作吗？

Answer 1

width: 100% 声明在 Safari(和其他浏览器)中工作得很好。 width: 100% 和 width: available 声明之间的区别是前者应该与 box-sizing: border-box 一起使用以防止溢出，而后者可以不使用 box-sizing: border-box 声明。因此，您的类可以重写如下，它应该在 Safari 中工作:

.width {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box: 
    width: 100%;
}