Width: 25% в Safary

[v01d0s]

Уважаемые, помогите, пожалуйста, решить проблему.

Суть:

Есть резиновый контейнер. В нем находятся элементы float:left или inline-block с шириной 25% или 50% или 75%.

Если изменять размер окна то в Safari (5.1.7 win и 4.0.3 mac и возможно в других) эти элементы иногда не занимают все доступное им пространство.

При чем если 4 элемента с шириной 25% могут оставлять пустыми 3px контейнера, то при этом 2 элемента с 25% и 75% оставляют только 1px. И получается как-то не ровно.

Вот пример http://jsfiddle.net/vo1daus/7WpY2/

В остальных браузерах вроде бы все норм.

Если у кого-то есть решение данной проблемы, или хотя бы знаете как сделать чтобы общая ширина элементов (3 x 25px) и (1 x 75px) была всегда одинаковой - поделитесь плиз.

Edited May 25, 2013 by v01d0s

[red4pony]

Пытался найти решение. Но не смог.

Неужели решение проблемы настолько очевидно, что знающие не хотят заморачиваться с ответом? Или это баг без решения?

С inline-block'ами понятно откуда берутся промежутки. Но с плавающими как... Тем более что только в Safari, в Chrome этого нет. Хоть и базируются на одном движке.

[Николя223]

нет сафари, поэтому не могу проверить, попробуйте через display: table это решить.

возможно сафари не делит на дроби, при составлении процентной части и подгонку не делает. А лишние пиксели - это остаток деления

[red4pony]

возможно сафари не делит на дроби, при составлении процентной части и подгонку не делает. А лишние пиксели - это остаток деления

Вы оказались правы, при изменении окна промежуток исчезает.

попробуйте через display: table это решить.

Ничего не выходит

Можно немного схитрить. Задать дополнительную обертку, добавить ей фон как у плавающих блоков, overflow:hidden (а у container убрать).

Статья на Хабре.

Нашел костыль для Safari 6:

Для трех из четырех(или для всех, не могу попробовать) блоков с шириной 25% задать так:

width: -webkit-calc(25%+1px);

Edited May 26, 2013 by red4pony

[v01d0s]

Можно немного схитрить. Задать дополнительную обертку, добавить ей фон как у плавающих блоков, overflow:hidden (а у container убрать).

В случае с примером можно.

Но на самом деле, я хотел сделать css сетку, типа вот этой http://www.designinfluences.com/fluid960gs/16/fluid/none/ , но немного модифицированную под свои нужды. Но столкнулся с этой проблемой, кстати для этой "Fluid 960 grid system" ошибка также воспроизводится.

То есть, фона не будет вообще, ни у контейнера, ни у его дочерних элементов. Было бы круто выровнять само содержимое элементов по одной линии по вертикали. Пример http://jsfiddle.net/vo1daus/7WpY2/61/.

[red4pony]

но немного модифицированную под свои нужды.

Можно последнему элементу в линии задать float:rigth. Края будут ровные, но последний промежуток будет больше. Если IE особо не волнует, можно сделать через inline-block. Их можно будет выровнять по ширине.

Было бы круто выровнять само содержимое элементов по одной линии по вертикали.

Не совсем понял. Т.е. чтобы содержимое в первой линии первого блока выравнивалась с содержимым второй линии первого блока?

[v01d0s]

Не совсем понял. Т.е. чтобы содержимое в первой линии первого блока выравнивалась с содержимым второй линии первого блока?

вот так в смысле

Можно последнему элементу в линии задать float:rigth. Края будут ровные, но последний промежуток будет больше. Если IE особо не волнует, можно сделать через inline-block. Их можно будет выровнять по ширине.

Точно, напомнили про justify.

Конечно те что в середине все равно иногда не совпадают на 1px, но уже лучше хоть по краям. Сделаю так: http://jsfiddle.net/7WpY2/63/ сойдет наверное

Спасибо за помощь!

[red4pony]

Пожалуйста.