Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

WebKit баг или что это?

#1 Fatush

Fatush
  • Пользователь
  • 1 сообщений
  • Репутация: 0
0

Отправлено 19 Май 2013 - 15:00

столкнулся с таким багом исключительно на webkit браузерах суть:
если есть разметка типа:

<div id="picture">
<div class="icon1">
</div>
<div class="icon2">
</div>
</div>

а в стилях для блоков прописан background-image например:

.icon1{
width: 100px;
heigth: 100px;
background: url(picture1.jpg);
}
.icon2{
width: 100px;
heigth: 100px;
background: url(picture2.jpg);
}

сами же картинки представляют одно разрезанное напополам изображение которое мы склеиваем через блоки.
в webkitах при масштабировании между этими блоками возникает разрыв в 1 или 2px, или линия неправильного цвета, но только тогда когда картинки представляют одно целое изображение
пример
если же будет просто 2 разных картинки то всё ок.
проблема решается если блоки отображать как display:inline-block;
а междустрочный интервал у их родителя line-height: 0 например:

#pictute{
width: 100px;
line-height: 0;
}
.icon1, .icon2{
display: inline-block;
}
.icon1{
width: 100px;
heigth: 100px;
background: url(picture1.jpg);
}
.icon2{
width: 100px;
heigth: 100px;
background: url(picture2.jpg);
}

вопрос собственно что это за баг и почему он возникает?

 

 

  • 0


Оформление форума – IPBSkins.ru