Рейтинг звезд перекрывающиеся фоновые изображения смещены только в Chrome

Я пытаюсь исправить проблему отображения в Chrome с рейтинговыми звездами.

У меня есть два дива с фоновыми изображениями.
Звезда имеет ширину 18px, поэтому я сделал ограничение div 90px (18×5). Внутри этого другого div динамически указывается, чтобы показать заполненные звезды, эквивалентные рейтингу.

Пример ширины, который я изложил в скрипке, основан на реальном примере с моего сайта. Только в браузере Chrome, с шириной 90px звезды не выстраиваются в линию. Однако если я уменьшу это до 89px по какой-то причине звезды выстраиваются в линию.

Я не вижу те же проблемы в IE или Firefox.

Я бы предпочел сохранить ширину на 90px, если есть решение для этого, потому что в противном случае последняя звезда немного отрезана в Firefox и IE, но я действительно царапаю голову о том, что вызывает рассогласование сейчас.

Почему звезды смещены только в Хроме?

https://jsfiddle.net/3hs0pnsq/

<style>
    .rating {
        background: url('http://www.solarreviews.com/images/star-18.png') repeat-x 0 0;
        width: 90px;
        height: 18px;
        display: block;
    }
    .rating-star {
        background: url('http://www.solarreviews.com/images/star-18.png') repeat-x 0 -18px;
        height: 18px;
        display: block;
    }
</style>

<div class="rating">
    <div class="rating-star" style="width: 72px;">
    </div>
</div>

<br />

<div class="rating">
    <div class="rating-star" style="width: 84px;">
    </div>
</div>

<br />

<div class="rating" style="width: 89px;">
    <div class="rating-star" style="width: 72px;">
    </div>
</div>

Результат:

звездный рейтинг результат

1 ответ

  1. Хотя мой браузер был установлен по умолчанию 100% Мои настройки дисплея были изменены каким-то образом, чтобы увеличить весь текст до 125%, что вызвало странную проблему в Chrome. Сброс настроек дисплея монитора исправил мою проблему.