使用jQuery css（）函数更改字体大小会导致Chrome崩溃 [英] Changing font-size with jQuery css() function is crashing 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'）; 
 
  

解决方案

我偶然发现了这个老问题寻找一个不同的问题，但我想我可以解决这个问题，特别是考虑到与-1而不是-0.5的事情。

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

假设尺寸从14px开始。当你运行这段代码时：

  // $ size = 14 
 $ size = $（'＃movie-info .vote '）的CSS（' 字体大小 '）替换（' 像素， ''）; 
 // font-size：13.5px 
 $（'＃movie-info .vote'）。css（'font-size'，（$ size-0.5）+'px'）; 
  

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

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

  //不要忘记用`var`声明给出$ size本地范围！ 
 //否则它会在全局范围内声明，这可能会导致
 //奇怪的错误或性能下降。 
 var $ size = $（'＃movie-info .vote'）.css（'font-size'）。replace（'px'，''）; （$（'＃movie-info .vote'）。height（）> 30）{
 $ size = $ size  -  0.5; 
 $（'＃movie-info .vote'）。css（'font-size'，$ size +'px'）; 
} 
  

So I have this bit of code that works perfectly in FF and IE8, but it's crashing 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');
}

解决方案

I stumbled upon this old question looking for a different issue, but I think I can shed some light on the issue, especially considering the "works with -1 instead of -0.5" thing.

Chrome and other WebKit-based browsers handle unit rounding differently than Firefox and IE. While Firefox does its best to render and report fractional pixel sizes and IE renders rounded sizes but continues to report exactly what you specified, WebKit rounds the rendered value AND reports the rounded value when you ask for it back.

Let's say the size starts at 14px. When you run this code:

// $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 rounds off your size change and the font size is still 14px. So, the loop will never stop because $size never decreases.

A simple solution would be to declare $size once instead of asking Chrome what it is:

// 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崩溃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！