Question

所以我有一些代码可以在FF和IE8中完美运行，但它崩溃了Chrome：

while($('#movie-info .vote').height()>30) {
    $size = $('#movie-info .vote').css('font-size').replace('px','');
    $('#movie-info .vote').css('font-size',($size-0.5)+'px');
}

Answer 1

我想这是因为chrome不允许font-size达到某个限制，但是当font-size达到限制时，height仍然是> 30 ..？

我认为您应该避免使用for循环，而是根据'#movie-info .vote'高度重新计算最佳字体大小。

更新

要使用隐藏延续的单行行，请使用以下内容：

#movie-info .vote {
    line-height: 1.5em;
    height: 1.5em;
    overflow: hidden;
    white-space: nowrap;
}

在此处试试：http://jsfiddle.net/fvcHd/4/

Answer 2

我偶然发现了一个寻找不同问题的旧问题，但我想我可以对这个问题有所了解，特别是考虑到“使用-1而不是-0.5”的事情。

Chrome和其他基于WebKit的浏览器处理单位舍入的方式与Firefox和IE不同。虽然Firefox尽最大努力渲染和报告小数像素大小并且IE呈现圆形大小但仍继续准确报告您指定的内容，但WebKit会舍入渲染值并在您要求它时报告舍入值。

假设尺寸从14px开始。当您运行此代码时：

// $size = 14
$size = $('#movie-info .vote').css('font-size').replace('px','');
// font-size: 13.5px
$('#movie-info .vote').css('font-size',($size-0.5)+'px');

Chrome会缩小您的尺寸更改，字体大小仍为14px。因此，循环永远不会停止，因为$size永远不会减少。

一个简单的解决方案是声明$ size而不是询问Chrome是什么：

// Don't forget to declare with `var` to give $size local scope!
// Otherwise it is declared in global scope which could lead to
// weird bugs or lost performance.
var $size = $('#movie-info .vote').css('font-size').replace('px','');
while ($('#movie-info .vote').height() > 30) {
    $size = $size - 0.5;
    $('#movie-info .vote').css('font-size', $size + 'px');
}

使用jQuery css（）函数更改字体大小会导致Chrome崩溃

2 个答案:

更新