元素宽度在 chrome 和 Internet Explorer 中有所不同答案

【问题标题】：Element width varies in chrome and in Internet Explorer元素宽度在 chrome 和 Internet Explorer 中有所不同
【发布时间】：2019-08-22 12:26:54
【问题描述】：

我有以下代码，

<div class="Wrapper" style="width: 100%; height: 20%; justify-content: space-between;">
    <div class="customText" style="width: auto; font-size: 33px; float: left; min-width: 10%;">Test</div>
    <div class="valueContainer" style="height: 100%; max-width: 90%;">
        <div class="value" id="containercardElementCard1_ActValue" style="width: auto; color: rgb(104, 98, 98); line-height: 55px; font-size: 33px; max-width: 100%;" data-tooltip="Value: ">7,632,789,549</div>
    </div>
</div>

这里的包装宽度是247px。

在 chrome 中，customText div 采用 38.5px 宽度，valueContainer 采用 208.4px 而在 IE 中，customText 采用 60.3px 和 valueContainer 采用 186.6px

我怀疑 max-width 属性在 IE 中不起作用。

【问题讨论】：

除非你用的是IE6，否则IE支持max-width，see
247 的 90% 是 222 像素，所以如果 IE 的宽度是 186 像素，那并不表示 max-width:90% 不起作用。
浏览器是否使用相同的字体？另外，您使用justify-content，这是否意味着包装器是一个弹性容器？在这种情况下，您不需要浮动。
max-width 是百分比。所以这取决于90% 和100% 是什么？请不要使用floats
@MrLister 是的，包装器是一个弹性容器，我删除了浮动，但它保持不变

标签： html css internet-explorer

【解决方案1】：

这个错误的原因是：IE 只是拒绝将元素的大小设置为小于设置的字体大小。

处理此错误的最佳方法是将overflow: hidden 应用于元素，使其折叠到预期的高度。

【讨论】：