一些文本在被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;
}