Всем привет, сегодня натолкнулась на интересный баг.
Есть квадратная сетка:
<div class="grid">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>Ширина каждого элемента .item задана в процентах и различается, в зависимости от ширины экрана. У меня она определялась такой вот функцией:
.grid-cell(@n, @parent: 100%){
@width: @parent / @n;
height: -1px;
width: @width;
padding-bottom: @width;}Здесь n — число колонок для текущей ширины.
В «Хроме» при рендеринге обнаруживалось, что для некоторой ширины экрана между колонками или между рядами появляется лишний, никем не занятый, пиксель. Возникает это из-за различного округления дробный пикселей в разных браузерах (подробнее тут и тут).
Фикс заключается в том, что для .item прописываем:
.item{
margin-right: -1px;
margin-bottom: -1px;}Всё же надеюсь, что подобных проблем ни у кого больше не возникнет.
