Tableless justification или inline-blocks revisited / Каскадные Таблицы Стилей / Хабрахабр

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

Tableless justification или inline-blocks revisited / Каскадные

Таблицы Стилей / Хабрахабр

<ul class="menu">
    <li class="menu-item_outerWrap">
        <div class="menu-item">
            <div class="menu-item_innerWrap">
                <span class="menu-item-icon">&nbsp;</span>
                <a href="/news">Новости</a></div></div></li>
    <li class="menu-item_outerWrap">
        <div class="menu-item">
            <div class="menu-item_innerWrap">
                <span class="menu-item-icon">&nbsp;</span>
                <a href="/swen">Старости</a></div></div></li>
    <li class="menu-item_outerWrap">
        <div class="menu-item">
            <div class="menu-item_innerWrap">
                <span class="menu-item-icon">&nbsp;</span>
                <a href="/profit">Всякая информация</a></div></div></li>
    <li class="menu-item_outerWrap menu-item_sizer">&nbsp;</li>
</ul>

.menu {
    text-align: justify;
}

.menu-item_outerWrap {
    display: inline;
}

.menu-item {
    background-color: Green;
    display: inline-block;
    padding: 5px 15px;
    position: relative;
    text-align: left;
}

* html .menu-item {
    display: inline;
    zoom: 1;
}

*+html .menu-item {
    display: inline;
    zoom: 1;
}

.menu-item_innerWrap {
    display: block;
}

.menu-item_sizer {
    width: 100%;
}

.menu-item-icon {
    background-color: Red;
    height: 5px;
    position: absolute;
    right: 0;
}