проблема с background-size в Firefox

[Elflight]

Здравствуйте, коллеги!

Есть блок отображения рейтинга в виде сердечек. Сверстан просто: блок шириной 75px заполняется бэкграундом-картинкой-сердечком с background-size: 15px 12px. Т.е. 5 сердечек шириной 15px полностью заполняют блок шириной 75px:

#ratingbox {  display: table-cell;  text-align: right;  width: 75px;   height: 16px;  background: url('/images/icons/empty.png') 0 0 repeat-x;  background-size: 15px 12px;  position: relative;}

Проблема в том, что в фаерфоксе 5 сердечек фактически занимают больше 75 пикселей, на каждое сердечко добавляется по 1 лишнему пикселю ширины, и блок ползет. В остальных браузерах все в норме.

Вживую посмотреть можно здесь: http://vkruzhevah.ru/sale/

Подскажите, пожалуста, что это за феномен и как с ним бороться...

[npofopr]

Я бы на вашем месте лучше сразу подключил скрипт, что то типа такого

http://wbotelhos.com/raty

 

Потому что как вы, простым беграундом, рейтинг не сделается, еще и двумя блоками %)

 

Видимо ФФ по другому считает размеры... вместо 12px попробуйте auto написать, вроде сразу влазят. 

[Elflight]

npofopr, спасибо за ответ. Не вижу проблемы в том, чтобы посчитать рейтинг на сервере и вывести его средствами html+css. Если размер бэкграунда "auto", то сердечки отображаются родного размера и влезает только 4 штуки. А мне их нужно уменьшить. И во всех браузерах, кроме фаерфокса, это работает прекрасно. Вопрос только в том, в чем специфика фаерфокса.

[npofopr]

вывести его средствами html+css

очень интересно, как вы выведите определенное кол-во сердечек из цельного беграунда)

 

Если размер бэкграунда "auto"

дак ведь auto только для высоты, в длинну то он заполнит то место, что вы ему отведете.

[Elflight]

В картинке бэкграунда одно сердечко. И я хочу его вывести с шириной 15px. Т.е. если блок имеет ширину 60px, то при заполнении в него влезут 4 сердечка. Все просто. Это работает ) Но фаерфокс имеет какую-то особенность рендеринга, и я хочу разобраться в этой особенности. Есть конкретная проблема в рендеринге верстки, давайте не уходить в сторону и не обсуждать методологию вывода рейтинга )

Автовысота почему-то действительно срабатывает, если поиграть с ней в фаербаге (видимо элементы отрисоываются заново и почему-то правильно). Но при указании этого значения непосредственно в коде, все остается по прежнему. Да и не вижу причин чему-то измениться, проблема-то в ширине...