Question

我一直在使用这个类正确地拉伸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

宽度：100％声明在Safari（以及其他浏览器）中运行良好。宽度：100％和宽度：可用声明之间的区别在于前者应与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%;
}

css中的防弹宽度黑客将涵盖所有包括Safari？

1 个答案: