如何解决 Firefox 中的字段集大小调整问题？

调整大小问题以及如何解决它

问题：

当包含元素的宽度减小时，某些浏览器（尤其是 Firefox）中的元素无法缩小其宽度。这会导致水平滚动条及其父容器的不合适。

根本原因：

默认情况下，字段集应用了“min-content”的最小宽度给他们。这可以覆盖您通过 CSS 设置的任何最大宽度或宽度规则。

解决方案：

要允许

正确缩放：

1. WebKit 和 Firefox 53 :

   • 设置最小宽度：0；在字段集上覆盖默认值。

2. Firefox 53 之前：

   • 设置 min-width: 0 ;在字段集上。
   • 将字段集的显示属性更改为以下之一：table-cell、table-column、table-column-group、table-footer-group、table-header-group、table -行，或表行组。

   建议值： table-cell

浏览器兼容性：

• 初始问题已在 Firefox 53 及更高版本中修复。
• 针对此问题，建议的 @-moz-document 解决方案现已过时，但仍应适用于旧版本Firefox。

警告：

除此特定问题外，请避免在 CSS 中使用 @-moz-document 来定位 Firefox。现在有更好的方法来实现浏览器特定的样式。

以上是如何解决 Firefox 中的字段集大小调整问题？的详细内容。更多信息请关注PHP中文网其他相关文章！