SelenIT

Вообще-то в общем случае нет. Вот неплохой перевод классической статьи PPK (уже заслуженной, но всё еще актуальной): http://www.beskrovnyy.com/verstka/skaz-o-dvux-vyuportax-chast-vtoraya/

Скорее, те, кто знают, что такое вообще «браузер» и как его установить/обновить, и у кого есть права на это — те уже не пользуются старыми IE. А тем, кто пользуется, предложение «скачать и установить новый браузер» либо ничего не скажет, либо не поможет (учетка с огран. правами). Нужно воздействовать на начальников/админов. Например, как-то так

Ага, поторопился я с прошлым ответом (про фон) Вроде position: relative; помогает. Вообще, конечно, налицо баг реализации ellipsis в Фоксе. Судя по всему, этот.

Нет.

Вот стоило пожаловаться, как вышлел 9-й Сафари с беспрефиксными флексбоксами (а заодно анимациями и CSS-колонками)

Может, там тоже артефакт более старой версии спецификации (ширина дочернего элемента рассчитывается как для блока, а не по содержимому)?

Ошибки расчета/округления случаются и в Хроме, увы. Вот, не далее как на той неделе...

Проще всего, как ни банально, сделать такое выравнивание CSS-таблицей

Если речь про эту статью, то имхо к ней особо серьезно относиться не стоит, пример в ней всё-таки достаточно искусственный. Если про эту, то тут уже серьезнее: любая система раскладки, где одни блоки зависят от других — потенциальная проблема скорости отрисовки из-за необходимости перерисоывать большую площадь. Поэтому в среднем флексбоксы оказываются чуть медленнее таблиц (хотя Пол Айриш уверял, что в Blink новые флексбоксы чуть быстрее их), а в мобильном Сафари я лично сталкивался с тем, что глобальные флексбоксы ощутимо подгружали и без того сложную страницу (вплоть до того, что с ними она на первом мини-айпаде вылетала, а без них — нет). Может, из-за этого в Сафари и не торопятся убирать экспериментальный префикс...

Не спорю, что логичней. Но если вот хочется человеку странного задача требует, есть вот такой извр обходной вариант Более интересные варианты иногда получаются, если наоборот, отрабатывать :hover только у псевдиков. Вплоть до чего-то интерактивного вообще без HTML-разметки

Насколько я сам понял, автор хотел сделать колонки одинаковой высоты (как в таблице), но при этом чтобы их содержимое было отцентрировано по вертикали независимо от кол-ва строк. Флексбоксы умеют либо растягивать, либо центрировать, поэтому с ними нужна дополнительная обертка (это не то чтобы проблема... но таблица обходится без нее ).

По моим наблюдениям, очень даже пользуется. Поддержка браузерами вплотную приближается к 95% (даже Опера Мини после обновления движка на сервере стала поддерживать!). Ведущие фреймворки переходят на flex по умолчанию для сеток. Не нужны хаки типа клирфиксов (как с float-ами), борьбы с пробелами (как с инлайн-блоками), возможностей больше, чем у таблиц (за редкими исключениями), а в Blink флексбоксы (стандартный, новый вариант) и рендерятся быстрее таблиц. Ну и просто мода в какой-то мере

Именно внутри. Как вложенный span. Поэтому наведение на псевдик == наведение на часть элемента == наведение на элемент. По идее, это можно переопределить, задав псевдику pointer-events: none, но имхо это костыль.

Потому что ширина, когда она не задана, определяется как доступная ширина родителя минус марджины-бордеры-паддинги (для флекс-контейнеров она определяется так же, как для блоков). А высота, если она не задана, определяется исключительно по содержимому.

Похоже ни в чем, похоже какой-то странный баг с округлением ширины (по крайней мере, в Хроме). Вроде бы помогает задание блокам flex: 1 0 181px. UPD: в Firefox всё рисуется как ожидалось, что укрепляет версию о баге Хрома.

Действительно . Но плюсик там тоже работает

Плюсик в IE7 тоже работает, просто IE7 никому не нужен, а IE8 нет-нет да встречается на XP...

Уэс Бос недавно в твиттере советовал использовать селектор :not() вместо переопределения стилей: .news:not(:last-child) div { padding-right: 15px;}в ответах предложили еще более кроссбраузерную (IE8...) альтернативу: .news + .news div { padding-left: 15px;}

Контейнер, из которого не будут выпадать ни флоаты, ни margin-ы потомков, но который не будет обрезать выступающее содержимое (как overflow) или распирать родителя при широком содержимом (как display:table).

Кстати (пока чисто для общей ерундиции, но веб быстро развивается) в CSS Display 3 планируется ввести спецовое значение, создающее отдельный контекст без побочки — display: block flow-root.

А, понятно. Да, это как раз тот случай, где классический клирфикс, реагирующий на все предшествующие флоаты (включая соседние колонки!), пасует, и подходят только методы на основе создания контекста форматирования (overflow или display:inline-block/table-cell/table с необходимыми добавками).

Вообще достаточно поставить clear:left тому самому «следующему диву».

Угу, сглупил я что-то, auto действительно атрибуты не учитывает. Тогда только через not()...

Справедливости ради, Илья Стрельцын не придумывал клеарфикса . Он «переоткрыл» (хотя и независимо, и, пожалуй-таки, чуточку поизящнее) идею Николь Салливэн по созданию отдельного блочного контекста форматирования с минимальными издержками (по сравнению с overflow). И решительно возражает против называния этого метода clear-фиксом — он никак не связан со свойством clear, основан на другом принципе и имеет другие границы применимости. По сабжу — присоединяюсь к вопросу, а как должно быть. По мне, на скриншоте всё логично...

Как вариант, можно задать стиль только для тех img, которым атрибуты не проставлены: img:not([width]) { width: ...px;}img:not([height]) { height: ...px;}Ну или наоборот, если проставлены — переопределять на auto, как предложено выше...