Pull to refresh

Comments 65

Неясно почему минусуют. Ведь была уже статья, кто-то переводил раньше уже. Зачем делать одну работу несколько раз?
На самом деле, для укрощения старых IE достаточно использовать тэги, которые по умолчанию ведут себя как inline-block: например, ins и del.
<ins style="display: inline-block;width: 25%; ">
<div style="float: left; width: 100%;">
это инлайн-блок
</div>
</ins>

Вот пример использование, когда товары в магазине автоматически выстраиваются в подходящее число колонок по ширине в зависимости от ширины окна браузера (надеюсь не рухнет). Сам метод описывал еще лет 5 назад один из сотрудников студии Лебедева (по крайней мере я узнал от них).

Может это и не самое кошерное решение с точки зрения семантики, зато оно простое и главное работающее без хаков под каждую версию браузера.
Единственное, у вас в конце, где 3 букета, они выравниваются по середине.
Это настройки общего дива, в котором все инсы.
«для укрощения старых IE достаточно использовать» любый inline элементы + hasLayout
UFO just landed and posted this here
Да, в идеальном мире для идеального браузера. Я еще не видел настоящей кошерной верстки, рассчитаной на весь сегмент браузеров от хотя бы ie7 и выше — везде так или иначе приходится добовлять хотя бы один лишний элемент.
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
Полезная вещь.
Я делал по другому: брал все в дивы и после 4го дива писал
<br clear="all" />

получилось ;)
Наверное, все же clear=«both»?)
Нет, именно так, попробуйте.
Да-да, у вас как атрибут, а я имел в виду стиль.
тьфу блин,
<br style="clear:both">
А зачем делать это стилем если есть атрибут? Да и способ не лучший.
Смысл как раз в том, чтобы число элементов попадало в одну строку автоматически. Даже таблицей так не сверстать…
Это же программированием решается, и уже не важно что там в верстке)
В зависимости от ширны окна уместить либо три либо пять либо семь блоков?
о, нет, конечно (речь о таблицах)
Чем вам поиск по яндекс.картинкам не пример?
zoom: 1;
display:-moz-inline-box;
-moz-box-orient:vertical;
display:inline-block;
_display:inline;
*display:inline;
vertical-align: top;

По-моему работает без всяких обверток в лишние div, в том числе в FF2.
Я уже забыл, когда видел последнего посетителя с ФФ2
Прочитав Ваш комментарий, решил посмотреть как обстоят дела на моём сайте ит-шной наклонности.
Знаете, у меня есть заходы не то что с Fx2, но даже с Fx1.5, хотя они все в пределах статистической погрешности:
img
не тру. Сначала идет _хак для ИЕ6, затем общий зак для 6 и 7 — *.
В данном случае этот _хак не нужен, звездочка все равно к обоим применится.
Звездочка, насколько я помню из детства, только с IE7 работает. Согласен, что можно заменить на комментарий "//", чтобы оставить одну декларацию.
И перед zoom еще, чтобы Safari исключить.
Виноват. И вправду на IE6 срабатывает. Детство мое было неправильное.
UFO just landed and posted this here
ничего не исчезает, не знаете сути проблемы не пишите чушь
Возьмитесь за правый край старого осла (гг) и подергайте сверстанный по статье сайт влево-вправо. Поймете, о чем речь.
Чем дольше поддерживаешь IE6, тем дольше он проживет.
Ну на самом деле тихий консенсус в отрасли состоит в том, чтобы по-умолчанию поддерживать IE6 лишь частично. То есть верстка не должна разваливаться, а сам сайт должен оставаться рабочим, но попиксельной точности уже никто не требует.
Я в таких случаях просто использую таблицу. Несмотря на то, что идеалогически это куда более худшее решение, оно значительно быстрее рендерится в браузерах.
Несколько дней назад столкнулся с подобной проблемой — допилил функционал сортировки таблицы на мониторинге, в итоге заметил неправильное отображение в ИЕ7 (под ИЕ6 — не делали, согласно ТЗ) ссылок из серии Добавить в закладки/избранное/на сайт. display: inline-block в ИЕ7 не работал почему-то.
Оказалось, если в <div>`е есть несколько <a> и <p>, то inline-block — не работал, а inline — не поддерживает border как надо. Выход — замена <p> на <span> — возможно, технологи скажут, что это семантически неверно, но работает.
Сохранять семантику при ие7 — тяжкое дело. А заказчик упёрто пытается указывать на «таблицы для нетабличных данных».
Ссылку на статью для этого перевода я нашел именно там )
CSS-хаки можно использовать более элегантно:

li {
min-height: 250px;
height: auto !important; // IE6 в одном селекторе игнорирует important
height: 250px;
display: inline;
display: inline-block; // IE такого не знает и воспользуется предыдущим свойством
zoom: 1;
}
два слеша не являются комментариями в css
Ну это же не css-файл :) Лень было просто.
UFO just landed and posted this here
Превосходная статья, не встречал раньше подобного метода. Теперь буду использовать! Спасибо за перевод.
Хорошее решение. Но я бы использовал джаваскрипт, просто чтобы выровнять высоту всех блоков по самому высокому +3px
И тоже самое при попытке изменить размер окна
FF2 уже вне игры, хаки для IE в эпоху Conditional Comments смотрятся как атавизм.
Что еще удивительно, нашлось немало тех, кто за два года с выхода статьи, ни разу на неё не наткнулся.
Или это хабр глючит выдавая архивные посты?
Нее, просто Чикуёнок мимоходом упомянул эту статью, вот все и кинулись читать.
Во-первых firefox 2 уже давно морально устарел и вот это можно выкинуть
display: -moz-inline-stack;
Во-вторых на резиновых сайтах возникали проблемы с таким кодом для firefox 2, так что там все чуть сложнее было, если кому надо могу поискать решение
В-третьих вы не решили проблему отступов у inline элементов, тоесть если убрать маргины то блоки будут не вплотную друг к другу стоять. Там нужно у контейнера несколько параметров обнулить, а у вложенного тега все восстановить.
Ну и код для ие6 — 7 лучше выносить в CC, но это и так все знают ))
UFO just landed and posted this here
Еще -moz-inline-stack; не работал в связке с position:relative;, а в Opera inline-block + relative переодически глючит до сих пор.
И тут на помощь приходит дремучий. Как ни странно, это было бы лучшим решением.
Вы не поняли, в чём проблема table. А проблема эта в том, что table не умеет переносить ячейки на новую строку или оставлять на предыдущей в зависимости от ширины окошка.
Резиновая верстка…
Я inline-block использую, когда нужно сделать горизонтальное ul-меню, чтобы оно размещалось в центре блока, т.е. реагировало на text-align: center;

Пока другого подобного решения не встречал.
Да, хороший рецепт. 10 июня прошлого года я приводил гиперссылку на сборник, состоящий из этого и нескольких других преполезнейших рецептов (общим числом полсотни), так что очень рад, что у Вас дошли руки перевести один из них. Поглядите на них — быть может, и другие приглянутся для перевода или хотя бы употребления.
Спасибо, обязательно посмотрю.
Вечера доброго!
А можно еще раз ссылочку, а то этот адрес уже канул в неизвестность?
По-видимому, та блогозапись была уничтожена физически из-за какого-то глюка Хабрахабра или стёрта модераторами хаба CSS. Сейчас я не нахожу в своём блоге ни одной блогозаписи от 10 июня 2010 года.
Привет вам из позапрошлого года.
Sign up to leave a comment.

Articles