Изменение размера шрифта с помощью функции jQuery css () приводит к сбою Chrome - PullRequest
Новая
       11

Изменение размера шрифта с помощью функции jQuery css () приводит к сбою Chrome

0 голосов
/ 18 декабря 2011

Итак, у меня есть этот кусок кода, который отлично работает в 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');
}

Ответы [ 2 ]

0 голосов
/ 18 июля 2012

Я наткнулся на этот старый вопрос в поисках другой проблемы, но я думаю, что могу пролить свет на эту проблему, особенно если учесть «работает с -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 завершает изменение размера, а размер шрифта по-прежнему составляет 14 пикселей. Таким образом, цикл никогда не остановится, потому что $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');
}
0 голосов
/ 18 декабря 2011

Я полагаю, это происходит потому, что Chrome не позволяет шрифту меньше определенного предела, но когда размер шрифта достигает предела, высота все еще> 30 ..?

Я думаю, вам следует избегать цикла for и вместо этого сразу пересчитывать оптимальный размер шрифта, в зависимости от '#movie-info .vote' высоты ..

UPDATE

Чтобы иметь строки в одну строку со скрытым продолжением, используйте что-то вроде этого: 

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

Попробуйте это здесь: http://jsfiddle.net/fvcHd/4/

...