Откат для старых (и надоедливых) браузеров для творческого использования «Flex-Box»

Question

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

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

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

---

UPDATE

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

---

Answer 1

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

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;
}

Answer 2

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

<div>
  <ul>
   <li>Elem 1</li>
   <li>Elem 2</li>
   .
   .
   .
   <li>Elem n</li>
  </ul>
</div>

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

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

Answer 3

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

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