SelenIT

В википедийной статье написано что-то странное. Например, что Safari не поддерживает SVG в HTML (хотя он поддерживает), а Хром поддерживает MathML (на самом деле нет). Написано, что все браузеры поддерживают <menu>, хотя на самом деле только Firefox хоть в каком-то виде поддерживает его как интерактивный элемент (из-за этого, кстати, его убрали из W3C HTML5.0, отложив на HTML5.1). Общий вывод-то верен, у браузеров бывают проблемы с реализацией тех или иных частей огромного стандарта, и старые браузеры без поддержки чего-то нужного порой уходят медленнее, чем хотелось бы. Но проверять поддержку лучше на том же caniuse.com, чем на таблицы из википедии (над которыми вдобавок висит плашка «информация устарела»).

Есть такое.

С прошлого октября HTML5 — действующая рекомендация W3C. В ближайшей перспективе — HTML5.1 (в планах на следующий год). Браузеров, не понимающих основ HTML5, практически не осталось.

Картинка http://5.firepic.org/5/images/2015-05/27/q5le0fxgj18l.png, вставленная в content псевдоэлементов, имеет высоту 57px, а выравнивается по базовой линии текста (vertical-align:baseline). Вот текст и сдвигается на высоту картинки.

Можно и нужно! Вам уже вторую страницу это советуют!

По ссылке вижу вариант с дивами (которым, правда, зачем-то задан display:table — это вы так с выпадением float-ов из контейнера боретесь?). И стили этим дивам почему-то опять заданы через айдишки, хорошо хоть разные, но смысл? Чем плохи классы?

Амперсанд желательно экранировать в виде &, поскольку иначе браузер/поисковик может попытаться интерпретировать &height=406 как неизвестную символьную постановку а-ля © или ². Насколько мне известно, в реальности таких браузеров (практически) нет, но лучше не создавать двусмысленных вещей в коде, поскольку закон Мерфи

Валидатор будет ругаться на одинаковый id, повторенный несколько раз, независимо от того, какому тегу он задан. И совершенно справедливо, поскольку для повторяемых вещей есть class, который опять же проходит валидацию для любого тега. Категорически рекомендую сначала попробовать понять причину проблемы (хотя бы перевести сообщение валидатора), прежде чем кидаться ее «исправлять». Это сэкономит массу времени и поможет не выглядеть нелепо).

<br>, как и любой разрешенный стандартом тег, ничем не плох, когда используется к месту. Например, для разбивки на строки почтового адреса или стихотворной строфы. Но здесь явно текст разбит на абзацы, а для этого, да, напрямую предназначен тег <p>. Нужно использовать элементы по назначению, иначе толку от формальной валидности немного. Универсальный контейнер для блоков — див. Спан — универсальный контейнер для частей фразы, в пределах одного абзаца.

Содержимое трогать нельзя? Навскидку, цены за февраль — апрель и ноябрь — декабрь одни и те же, нельзя ли объединить соотв. столбцы?

C <table> ничего делать не надо, он хороший и тут к месту. Исправлять надо вложенность элементов, чтобы потоковые элементы (<div>, <table> и т.п.) не вкладывались туда, где ожидается текстовое содержимое, напр. в <span>. И так до самого верха. Но вообще беспокоиться о валидности на странице, где разбивка на абзацы сделана через <br><br> — всё равно, что немытому человеку без штанов беспокоиться о красоте прически, пардон. Скорее всего не на повторы, а опять же на многократную неправильную вложенность. Или это не валидатор

Упс, и вправду(. Хотя... вопрос же про height:100%, а не min-height:100%...)

Можно, например так. Но пока не везде(

Поздравляю!

Не забывайте, что 246 байт — это только значение background-image (псевдо)элемента, всё остальное (размеры, позиционирование и т.п.) всё равно придется задавать в CSS . В моем варианте чуть выше на само рисование фигуры ушло порядка 196 байт (без пробелов для форматирования).

Действительно, выходит сопоставимо

ЕМНИП, как раз в IE7 text-align для колонок работал. А в новых браузерах, если у ячеек нет colspan/rowspan-ов, можно обращаться к ним по номеру в строке, а-ля td:nth-of-type(2)

Информация не соответствует действительности.

background-size: 100%; растягивает по обоим измерениям. Возможно, по вертикали не растянут сам body, должно помочь min-height: 100vh; для него.

Режим в браузере (парсинг HTML, интерпретация CSS, наличие/отсутствие document.all в Фоксе и т.п.) один. Ошибки валидатора, ориентирующегося на указанную в доктайпе схему, естественно, будут разные, но это проблема валидатора. Вывод валидатора, приближенного к условиям реального мира (html5.validator.nu или validator.w3.org/nu/) должен различаться ровно одной строкой — предупреждением об устаревшем (но допустимом) доктайпе.

А если поменять единицы clipPath c objectBoundingBox на userSpaceOnUse и задать их в пикселях, как для Хрома? И еще чуть смущает height="0" у самой SVGшки. Вообще живой пример проблемы бы увидеть...

Всегда нужно указывать единицы измерения при ненулевых величинах: не margin: 5 200, а margin: 5px 200px (а лучше margin: 5px auto, если нужно отцентрировать блоки). Без доктайпа браузер переключается в режим телепата и пытается додумывать это за автора, но особо полагаться на это (и вообще использовать этот режим) и впрямь не стоит. Как ни удивительно, но для HTML5 допустимы и строгие доктайпы HTML4/XHTML1. Все они включают в браузере один и тот же стандартный режим, а ни для чего другого доктайп в HTML5 и не нужен. Но самый правильный, да, этот — потому что самый короткий («если не видно разницы, зачем писать больше»).

Классический пример — http://people.opera.com/pepelsbey/experiments/bga/

Да, актуальный Сафари — 8-й. А Сафари под виндой использовали только сами верстальщики, не имеющие возможности проверить на маке, пока Эпл не перестала его разрабатывать года три назад.

И сделать это в самом CSS, без jQ, как предложено в первом же ответе топика