元素宽度在Chrome和Internet Explorer中有所不同

Question

我有以下代码，

<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中，customTextdiv占用38.5px宽度并valueContainer占用，208.4px 而在IE中，div customText占用60.3px并valueContainer占用186.6px

我怀疑该max-width属性无法在IE中运行。

Answer 1

这个bug的原因是：IE简单地拒绝将元素调整为小于设置的字体大小。

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