столкнулся с таким багом исключительно на webkit браузерах суть:
если есть разметка типа:
а в стилях для блоков прописан background-image например:
сами же картинки представляют одно разрезанное напополам изображение которое мы склеиваем через блоки.
в webkitах при масштабировании между этими блоками возникает разрыв в 1 или 2px, или линия неправильного цвета, но только тогда когда картинки представляют одно целое изображение
пример
если же будет просто 2 разных картинки то всё ок.
проблема решается если блоки отображать как display:inline-block;
а междустрочный интервал у их родителя line-height: 0 например:
вопрос собственно что это за баг и почему он возникает?
если есть разметка типа:
Код:
<div id="picture">
<div class="icon1">
</div>
<div class="icon2">
</div>
</div>
Код:
.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);
}
