width:max-content在Chrome生效但Firefox94不生效如何解决

问题原因 #

旧版火狐（94版本）对max-content的支持需要带-moz-前缀，你原来的代码存在3个兼容问题：

• @supports规则未检测前缀版本的max-content，导致适配火狐的样式块未生效
• 带前缀的属性-moz-max-content写在了标准属性后面，优先级被覆盖
• .tableDiv标签上的内联display: inline-block样式和max-content在旧火狐存在适配冲突

修复方案 #

按下面的规则调整代码即可实现Chrome和火狐的一致表现：

1. 调整@supports规则，同时检测标准和前缀版本的max-content
2. 调整属性顺序，前缀属性写在标准属性前面，确保旧版浏览器优先识别自己支持的属性
3. 移除.tableDiv标签上的内联display: inline-block样式，统一在CSS中指定为block

修改后的核心CSS代码 #

/* 其他原有样式保持不变，只修改.tableDiv相关部分 */
.tableDiv { 
  overflow-y: auto; 
  max-height: calc(90vh - 210px); 
  width: auto;  
  max-width: 100%;
  display: block; /* 覆盖内联的inline-block，解决适配冲突 */
}
/* 同时检测标准和火狐前缀版本的max-content */
@supports (width: max-content) or (width: -moz-max-content){
  .tableDiv { 
    overflow-y: auto; 
    max-height: calc(90vh - 210px); 
    /* 前缀属性写在前面，优先适配旧版火狐 */
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
  }
}

对应HTML调整 #

把原来的表格包裹标签

<div  class="tableDiv" style="display: inline-block;" >

修改为

<div class="tableDiv">

修改后即可实现预期效果：纵向滚动条紧贴自适应宽度的表格边缘，不会出现多余空白区域，也不会触发不必要的横向滚动条。

内容的提问来源于stack exchange，提问作者Fancy