React 15.6.1中如何用内联样式实现width属性兼容Chrome与Firefox？

遇到这种浏览器前缀的兼容问题，其实有两种简单的内联样式方案可以解决——既然React对象不允许重复键，那我们换个思路就能搞定：

方案一：根据浏览器动态设置width值 #

最直接的方式是检测当前浏览器是否为Firefox，给width设置对应的值，既不会触发重复键报错，又能精准适配：

// 处理服务端渲染场景，避免navigator未定义的报错
const isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.includes('Firefox');

const divStyle = {
  margin: 'auto',
  width: isFirefox ? '-moz-max-content' : 'max-content',
  fontSize: 24
};

// 组件中使用
<div style={divStyle}>你的内容</div>

这个方案逻辑清晰，每个浏览器只会加载自己支持的样式值，没有冗余代码。

方案二：利用React样式数组合并特性 #

React允许将样式写成数组形式，它会自动合并数组中的样式对象。我们可以把基础样式和浏览器专属样式分离，再合并使用：

const baseStyle = {
  margin: 'auto',
  fontSize: 24
};

// 根据浏览器生成对应的width样式对象
const widthStyle = typeof navigator !== 'undefined' && navigator.userAgent.includes('Firefox')
  ? { width: '-moz-max-content' }
  : { width: 'max-content' };

// 合并样式数组
const divStyle = [baseStyle, widthStyle];

// 组件中使用
<div style={divStyle}>你的内容</div>

这种方式把基础样式和兼容逻辑分开，后续如果要加其他浏览器的兼容规则，直接扩展数组即可，代码更易维护。

补充说明 #

如果担心navigator.userAgent的检测不够精准，也可以用特性检测的方式：比如创建一个隐藏元素，设置width: 'max-content'后读取计算样式，判断浏览器是否支持标准写法。不过对于这个场景，userAgent检测已经足够简单可靠了。

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