0

Вывожу картинку из спрайта, код такой:

http://jsfiddle.net/bn6np/

.menu_left_icons_imgn {
    background: url('http://i.imgur.com/Nei574m.png');
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    opacity: 1;
}
.menu_left_icons_img_active {
    background: url('../images/menu_left_icons_active.png?11');
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
}
.menu_left_icons_imgn.menu_left_icons_img_new_task {
    background-position: 0px 0px !important;
}
.menu_left_icons_imgn.menu_left_icons_img_all_task {
    background-position: 0px -26px !important;
    margin-top: 1px;
}
.menu_left_icons_imgn.menu_left_icons_img_my_tasks {
    background-position: 0px -49px !important;
}
.menu_left_icons_imgn.menu_left_icons_img_complaints {
    background-position: 0px -73px !important;
    margin-top: 1px;
}
.menu_left_icons_imgn.menu_left_icons_img_blacklist {
    background-position: 0px -96px !important;
}
<div class="menu_left_icons_imgn menu_left_icons_img_blacklist"></div>

Проблема в том, что если в Chrome нажать Ctrl+, т.е увеличить масштаб страницы, то иконка будто спадает вниз, обрезается и получается некрасиво. Скрин ниже:

alt text

Как это исправить? + ещё качество иконок портится ><

3
  • Описанный эффект наблюдается только при масштабе 110 процентов, масштабирование без потерь не получится
    – ReinRaus
    28 окт 2013 в 17:53
  • @ReinRaus ♦, вообще чтоли это неисправимо? Может я просто не так верстаю? Потому что не на всех иконках наблюдается такой эффект.
    – ModaL
    28 окт 2013 в 18:04
  • Делайте блок чуть больше на пару пикселей и собственно спрайты размечайте с большим пространством друг от друга тогда эти косяки масштабирования нивелируются свободным пространством. P.S> Если к вашему примеру добавить padding: 2px; то всё отлично смотриться.
    – ferrari
    28 окт 2013 в 20:10

1 ответ 1

2

Грязный хак.

.menu_left_icons_imgn {
    background: url('http://i.imgur.com/Nei574m.png');
    background-repeat: no-repeat;
    width: 16.1px;
    height: 16.1px;
    opacity: 1;
}
.menu_left_icons_img_active {
    background: url('../images/menu_left_icons_active.png?11');
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
}
.menu_left_icons_imgn.menu_left_icons_img_new_task {
    background-position: 0px 0px !important;
}
.menu_left_icons_imgn.menu_left_icons_img_all_task {
    background-position: 0px -26px !important;
    margin-top: 1px;
}
.menu_left_icons_imgn.menu_left_icons_img_my_tasks {
    background-position: 0px -49px !important;
}
.menu_left_icons_imgn.menu_left_icons_img_complaints {
    background-position: 0px -73px !important;
    margin-top: 1px;
}
.menu_left_icons_imgn.menu_left_icons_img_blacklist {
    background-position: 0px -96px !important;
}
<div class="menu_left_icons_imgn menu_left_icons_img_blacklist"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.