Баг с шириной в процентах и как его фиксить

02/07/2013

Мария Гришкевич

Всем привет, cегодня натолкнулась на интересный баг.

Есть квадратная сетка:

<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;}

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