JS函数更改某些文本会导致变形

Question

我已经建立了一个可以估算客户服务成本的计算器。计算器与HTML范围滑块一起使用，该滑块会在更改值时触发功能。该函数运行一些计算并使用jQuery使用结果更新某些div的HTML。

起初，文本看起来不错，但是如果用户使用的是Safari，则当结果更改且div的内容更新时，文本会失真，如下所示：

我试图更改div的高度，但是如您所见，div的高度不是问题：

这就是我所拥有的：

<div class="hex-result" id="hex-result1">
</div>

.hex-result{
    font-size: 2em;
    height: 40px;
    margin: 17px 0px 4px 0px;
}

val1 = $("#range-1").val();
val2 = $("#range-2").val();
val3 = $("#range-3").val();    

hex1Total = val1 * val2 * val3;
if (isNaN(hex1Total)) hex1Total = 0;
$("#hex-result1").html(numberWithCommas(hex1Total));

Answer 1

经过一天的研究，我发现问题出在线条高度上。

这是可行的CSS：

.hex-result{
    font-size: 2em;
    height: 45px;
    line-height: 45px;
    margin: 17px 0px 4px 0px;
}