Fallback для старых (и раздражающих) браузеров для творческого использования "Flex-Box"

Я не большой поклонник вопросов, которые дают некоторые критерии без обоснования приемлемого решения, но в этом случае у меня тоже есть: для совместимости нет JavaScript, кроме Modernizr. (Причина в том, что они слишком сильно замедляют страницу.)

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

Большой вопрос: как я могу предоставить резерв для (кашля) раздражающего (/кашля) Internet Explorer и старых браузеров без использования несколько известных FlexieJS библиотека? Достижимо ли это только с помощью css2, кроме установки максимальной процентной ширины для меню (ul) s (что действительно не работает)? Не могли бы вы хотя бы указать мне в правильном направлении? Спасибо!

UPDATE

Я дал еще одну попытку, но все еще не мог понять это сам. Любая помощь действительно ценится! Большое спасибо =) Вы можете найти мою попытку здесь.

ОТВЕТЫ

Ответ 1

Я знаю, что это старый поток, но я думал, что он заслуживает правильного ответа на то, о чем вы просили. Поскольку вы используете Modernizr, мы можем по умолчанию использовать inline-block, но обнаруживать, когда flexbox доступен и переопределяет (используя хороший ol или хорошее новое прогрессивное расширение). Чтобы заставить это работать, вы много переключаете #admin-links и #common-links. Ниже приведен код, и он работает в IE6+. Также доступна демонстрация .

HTML

<div id="wrapper">
    <div id="navigation">
        <ul id="admin-links">
            <li>
                <a href="#">Important Link</a>
            </li>
            <li>
                <a href="#">Important Link</a>
            </li>
        </ul>
        <ul id="common-links">
            <li>
                <a href="#">Important Link</a>
            </li>
            <li>
                <a href="#">Important Link</a>
            </li>
            <li>
                <a class="omittable" href="#">Omittable Link</a>
            </li>
            <li>
                <a class="omittable" href="#">Omittable Link</a>
            </li>
            <li>
                <a class="omittable" href="#">Omittable Link</a>
            </li>
        </ul>
    </div>
    <div id="content">
        <p>Hello world.</p>
        <p>This is supposed to be content.
            But only thing we care is the menu (Sorry about that.)
        </p>
        <p>Page width decreases, some items magically disappear.<br />
            Which is <strong>intended</strong>.<br />
            You can do that by pulling the frame bars around.
        </p>
    </div>
</div>

CSS

#wrapper {
    background: #eee;
    width: 100%;
    min-width: 450px;
    max-width: 700px;
    margin: 0 auto;
}
#navigation {
    height: 40px;
    background: #f00;
    width: 100%;
    overflow: hidden;

}

.flexbox #navigation {
    -moz-box-align: stretch;
    -moz-box-orient: horizontal;
    -webkit-box-align: stretch;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-orient: horizontal;
    -ms-box-orient: horizontal;
    box-orient: horizontal;
    -moz-box-align: stretch;
    -webkit-box-align: stretch;
    -ms-box-align: stretch;
    box-align: stretch;
    -moz-box-direction: reverse;
    -webkit-box-direction: reverse;
    -ms-box-direction: reverse;
    box-direction: reverse;
    display: -moz-box;
    display: -webkit-box;
    display: -ms-box;
    display: box;
    float: none;
}

#navigation ul {
    overflow: hidden;
    z-index: 990;    letter-spacing: -4px;

}
#common-links {
    overflow: hidden;
}

.flexbox #common-links {
  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  -ms-box-flex: 1;
  box-flex: 1;

}

#navigation li {


    display: inline-block;
    letter-spacing: normal; height: 40px;
}
#navigation li a {
    padding: 10px;
    display:inline-block;
    *display: inline;
    zoom: 1;
    background: #0c0;
    outline: solid 1px #0c0;
}

#navigation a.omittable {
    background: #0f0;
}

#admin-links {
    float: right;
}
.flexbox #admin-links {
    float: none;
}
#admin-links ul {
    white-space: nowrap;
}

Ответ 2

Будучи огромным поклонником кросс-браузерной совместимости, я не являюсь большим поклонником CSS3. Я думаю, что если вы можете добиться чего-то, используя чистый CSS, зачем использовать Javascript? Если вы ищете простой резерв для CSS2, используйте overflow: hidden. Я сделаю все возможное, чтобы объяснить, как этот простой атрибут может существенно достичь того же эффекта.

<div>
  <ul>
   <li>Elem 1</li>
   <li>Elem 2</li>
   .
   .
   .
   <li>Elem n</li>
  </ul>
</div>
  • Установите width элемента div на любую максимальную ширину, в которой вы хотели бы быть, и height на высоту ваших элементов.
  • Установите ul на display: inline;, чтобы его ширина расширялась в зависимости от размера внутренних элементов.
  • Настройте элементы li на float: left; (или справа), чтобы они отображались по горизонтали. Элементы height этих элементов должны быть такими же, как высота ul.

Таким образом, любой элемент, который не помещается в первую строку, будет переноситься на второй, но поскольку переполнение установлено в скрытое, они просто просто не отображаются.

Ответ 3

Если вы хотите использовать новые функции в старых браузерах, вам нужно будет использовать js для его исправления. Если вы напишете резерв для IE в CSS, вы также можете использовать один и тот же код в каждом другом браузере.

Возможно, стоит прочитать http://oli.jp/2011/css3-flexbox/ и http://www.xanthir.com/blog/b4580 также по нескольким причинам, почему flexbox вряд ли поймает - модуль шаблонов CSS, кажется, намного лучше.