Ars Longa, Vita Brevis

IE8 Beta 1 не оправдывает своих ожиданий...

Не так давно я боролся с вертикальным выравниванием в Internet Explorer, и вот опять оказалось, что с выходом IE8 Beta это было всё напрасно. Как и многие, я не рискнул устанавливать IE8 на основную машину, поэтому поставил на виртуальную. Затем зашёл на парочку сайтов, которые отображаются нормально во всех остальных браузерах… Я был потрясён и разочарован…

Возникает чувство, что Micro$oft называет свои alpha-релизы бетами. Они делали акцент на том, что MS IE8 проходит тест ACID2, так гордились этим… А оказалось, что всё как обычно: убрали один старый баг, внесли десяток новых.

Что меня шокировало больше всего: vertical-align больше не работает. Не работает и valign="middle" для элементов <td>. <br style="clear: both"> не всегда работает. Ширина элемента вычисляется довольно криво (тем не менее, тест ACID2 проходится). IE8 поддерживает хаки для IE7. Например, этот код сработает и в IE7, и в IE8:

[-]
View Code CSS
*:first-child+html p {
    color: red;
}

Так вот Micro$oft исправил поддержку CSS. Кстати, интересно, почему тогда не срабатывает старый хак для IE6 (* html p)?

В соответствии со стандартами CSS:

The :first-child pseudo-class represents an element that is the first child of some other element.
Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).

Таким образом, *:first-child+html будет читаться как “элемент html, предшествующий (любому) элементу, который является первым потомком неуказанного элемента”. То есть это будет соответствовать такой вот структуре:

[-]
View Code HTML
    <div id="unknown_element">
        <div id="first_child">*:first-child</div>
        <div id="adjacent">
            *:first-child+#adjacent
            <div id="test">*:first-child+#adjacent #test</div>
        </div>
    </div>

Для удовлетворения любопытства:

[-]
View Code CSS