width: fit-content在Chrome正常，IE下容器显示异常的兼容方案咨询

首先直接给你答案：width: fit-content不是仅支持Chrome，但IE浏览器全版本都不支持这个属性——这就是你在IE里看到容器尺寸偏小的核心原因。它在Chrome、Firefox 34+、Safari 11.1+这些现代浏览器里都是原生支持的，但IE从6到11都没实现这个CSS特性。

接下来给你几个实用的全浏览器兼容方案，涵盖IE8及以上（如果还需要兼容更老的IE，后面也有补充）：

方案1：用inline-block实现自适应宽度 #

inline-block元素的宽度会自动贴合内容，而且IE8及以上都支持这个属性，是最常用的替代方案。

写法很简单：

.your-container {
  display: inline-block;
  /* 如果需要让这个容器保持块级元素的换行特性，可以在外层套一个div，或者给父元素加text-align属性调整位置 */
}

注意：如果你的容器原本是块级元素，用inline-block后它不会独占一行，要是需要独占一行的话，在外层包一个块级容器就行。

方案2：利用CSS表格布局 #

CSS表格的宽度同样会自适应内容，而且IE8+支持，同时能保留类似块级元素的特性（比如可以正常使用margin:auto居中）：

.your-container {
  display: table;
  width: auto; /* 显式设置auto确保宽度不会被拉伸 */
}

这个方案适合那些需要保持块级行为、同时宽度贴合内容的场景，比inline-block更灵活一点。

方案3：兼容IE7及以下的降级方案（可选） #

如果你的项目还需要兼容IE7这种古董浏览器，可以用浮动来实现：

.your-container {
  float: left;
}
/* 记得给父元素添加清除浮动的样式，比如： */
.parent-container {
  overflow: hidden;
  /* 或者用经典的clearfix伪元素方案 */
}

不过浮动会改变元素的布局流，使用时要注意父元素的高度塌陷问题，需要配合清除浮动的处理。

补充：现代浏览器的前缀增强 #

虽然解决不了IE的问题，但为了兼容一些旧版本的现代浏览器，可以加上前缀增强：

.your-container {
  width: -webkit-fit-content; /* Chrome早期版本、Safari */
  width: -moz-fit-content; /* Firefox早期版本 */
  width: fit-content; /* 标准写法 */
}

但这个只能作为现代浏览器的优化，不能解决IE的兼容问题，所以还是要结合上面的方案一起用。

总结一下：如果要覆盖包括IE在内的全浏览器，优先选择inline-block或者CSS表格布局的方案，这两个在IE8+都能完美实现fit-content的效果，不需要复杂的hack。

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