Html 适用于 Chrome 但不适用于资源管理器的宽度适合内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49095440/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Width-fit content working on Chrome but not explorer
提问by Rocks
I built an app and everything is displayed perfectly in Chrome, but if I open the app in Windows Explorer the containers are smaller than they should be.
我构建了一个应用程序，一切都在 Chrome 中完美显示，但是如果我在 Windows 资源管理器中打开应用程序，容器会比它们应该的小。
I'm using width: fit-content. Is this something that only works with Chrome.
我正在使用width: fit-content. 这是仅适用于 Chrome 的东西吗？
How can I make it so that it works with all browsers?
我怎样才能使它适用于所有浏览器？
回答by Rocks
width: fit-contentis still in experimental stages, and is currently supported on Chrome 46.x and above (without vendor prefix), FF 3.x and above (with vendor prefix). Not supported on either IE or edge.
You can refer to compatibility chart here: Browser compatibility for width:fit-content
width: fit-content仍处于实验阶段，目前支持 Chrome 46.x 及更高版本（无供应商前缀）、FF 3.x 及更高版本（有供应商前缀）。IE 或 Edge 都不支持。
您可以在此处参考兼容性图表：宽度的浏览器兼容性：适合内容
One alternative is to use display: table, which has the same effect as width: fit-content. Of course, there are other ways that you can try depending on what your requirements are.
一种替代方法是使用display: table，其效果与width: fit-content. 当然，根据您的要求，您还可以尝试其他方法。
#fit-content {
width: fit-content;
background: pink;
}
#table {
display: table;
background: lightblue;
}
#normal {
background: green;
}<div id="fit-content">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Wikipedesketch1.png"> fit-content
</div>
<div id="table">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Wikipedesketch1.png"> table
</div>
<div id="normal">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Wikipedesketch1.png"> normal
</div>回答by Harshada Samant
It can be done with width:autobut only when an element is display: inline-blockas well as setting the value as right:inheritor left:inherit.
它可以完成，width:auto但仅当一个元素是display: inline-block以及将值设置为right:inheritor 时left:inherit。
Example:
例子：
.my_div {
width: auto;
display: inline-block;
right:inherit; /* align to left */
}
回答by Bilal Kazmi
another alternative is to use width:auto;This works sometimes but it depends on your specific case.
另一种选择是使用width:auto;This 有时有效，但这取决于您的具体情况。
回答by Eduard Brokan
Have similar problem. In one div, have others with display:inline-block
有类似的问题。在一个 div 中，让其他人与display:inline-block
For parent div use white-space : nowrap;
对于父 div 使用 white-space : nowrap;
Don't forget to set to child's div white-space : normal;
不要忘记设置为孩子的div white-space : normal;
.parent {
width: max-content;
white-space : nowrap;
}
.parent .child {
display: inline-block;
white-space : normal;
}
HTML example
HTML 示例
<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>
