Flexbox打破IE

时间:2017-07-05 20:26:58

标签: html internet-explorer flexbox

我正在使用flexbox尝试一些布局,但在IE中它似乎永远不会起作用。我想知道自己做错了什么。我检查了IE中存在的错误,但我似乎根据它做了一切。

<div class="main">
        <div class="main-inner">
            <div class="breadcrumb">
                <a href="#">Beleza</a> > <a href="#">Esponjas</a>
            </div>
            <aside class="sidebar">
                <h1 class="sidebar-heading">
                    Filtrar por
                </h1>

                <ul class="filter ul-reset">
                    <li class="filter-item">
                        <section class="filter-item-inner">
                            <h1 class="filter-item-inner-heading minus">
                                Cor
                            </h1>
                            <ul class="filter-attribute-list ul-reset">
                                <div class="filter-attribute-list-inner">
                                    <li class="filter-attribute-item">
                                        <input type="checkbox" id="colour-attribute-1" class="filter-attribute-checkbox ib-m">
                                        <label for="colour-attribute-1" class="filter-attribute-label ib-m">
                                            White
                                        </label>
                                    </li>
                                    <li class="filter-attribute-item">
                                        <input type="checkbox" id="colour-attribute-2" class="filter-attribute-checkbox ib-m">
                                        <label for="colour-attribute-2" class="filter-attribute-label ib-m">
                                            Lime
                                        </label>
                                    </li>
                                    <li class="filter-attribute-item">
                                        <input type="checkbox" id="colour-attribute-3" class="filter-attribute-checkbox ib-m">
                                        <label for="colour-attribute-3" class="filter-attribute-label ib-m">
                                            Biege
                                        </label>
                                    </li>
                                    <li class="filter-attribute-item">
                                        <input type="checkbox" id="colour-attribute-4" class="filter-attribute-checkbox ib-m">
                                        <label for="colour-attribute-4" class="filter-attribute-label ib-m">
                                            Khaki
                                        </label>
                                    </li>
                                    <li class="filter-attribute-item">
                                        <input type="checkbox" id="colour-attribute-5" class="filter-attribute-checkbox ib-m">
                                        <label for="colour-attribute-5" class="filter-attribute-label ib-m">
                                            Olive
                                        </label>
                                    </li>
                                    <li class="filter-attribute-item">
                                        <input type="checkbox" id="colour-attribute-6" class="filter-attribute-checkbox ib-m">
                                        <label for="colour-attribute-6" class="filter-attribute-label ib-m">
                                            Yellow
                                        </label>
                                    </li>
                                    <li class="filter-attribute-item">
                                        <input type="checkbox" id="colour-attribute-7" class="filter-attribute-checkbox ib-m">
                                        <label for="colour-attribute-7" class="filter-attribute-label ib-m">
                                            Gold
                                        </label>
                                    </li>
                                    <li class="filter-attribute-item">
                                        <input type="checkbox" id="colour-attribute-8" class="filter-attribute-checkbox ib-m">
                                        <label for="colour-attribute-8" class="filter-attribute-label ib-m">
                                            Sepia
                                        </label>
                                    </li>
                                    <li class="filter-attribute-item">
                                        <input type="checkbox" id="colour-attribute-9" class="filter-attribute-checkbox ib-m">
                                        <label for="colour-attribute-9" class="filter-attribute-label ib-m">
                                            Brown
                                        </label>
                                    </li>
                                    <li class="filter-attribute-item">
                                        <input type="checkbox" id="colour-attribute-10" class="filter-attribute-checkbox ib-m">
                                        <label for="colour-attribute-10" class="filter-attribute-label ib-m">
                                            Salmon
                                        </label>
                                    </li>
                                    <li class="filter-attribute-item">
                                        <input type="checkbox" id="colour-attribute-11" class="filter-attribute-checkbox ib-m">
                                        <label for="colour-attribute-11" class="filter-attribute-label ib-m">
                                            Coral
                                        </label>
                                    </li>
                                    <li class="filter-attribute-item">
                                        <input type="checkbox" id="colour-attribute-12" class="filter-attribute-checkbox ib-m">
                                        <label for="colour-attribute-12" class="filter-attribute-label ib-m">
                                            Red
                                        </label>
                                    </li>
                                    <li class="filter-attribute-item">
                                        <input type="checkbox" id="colour-attribute-13" class="filter-attribute-checkbox ib-m">
                                        <label for="colour-attribute-13" class="filter-attribute-label ib-m">
                                            Ruby
                                        </label>
                                    </li>
                                    <li class="filter-attribute-item">
                                        <input type="checkbox" id="colour-attribute-14" class="filter-attribute-checkbox ib-m">
                                        <label for="colour-attribute-14" class="filter-attribute-label ib-m">
                                            Plum
                                        </label>
                                    </li>
                                    <li class="filter-attribute-item">
                                        <input type="checkbox" id="colour-attribute-15" class="filter-attribute-checkbox ib-m">
                                        <label for="colour-attribute-15" class="filter-attribute-label ib-m">
                                            Violet
                                        </label>
                                    </li>
                                </div>
                            </ul>
                        </section>
                    </li>

                </ul>
            </aside>
            <div class="product-grid">
                <ul class="product-directive">
                    <li class="grid-product-box">
                        <div class="item">
                            <div class="product">
                                <div class="picture">
                                    <a href="#" class="product-image">
                                        <img src="img/esponja.jpg">
                                    </a>
                                </div>
                                <div class="star-ratings-sprite">
                                    <span class="rating"></span>
                                </div>
                                <a href="#" class="product-title-link">
                                    <h4 class="product-title">Esponja</h4>
                                </a>
                                <div class="product-price">
                                    <span>2.00 €</span>
                                </div>
                                <div class="product-buttons">

                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="grid-product-box">
                        <div class="item">
                            <div class="product">
                                <div class="picture">
                                    <a href="#" class="product-image">
                                        <img src="img/cotton.jpg">
                                    </a>
                                </div>
                                <div class="star-ratings-sprite">
                                    <span class="rating"></span>
                                </div>
                                <a href="#" class="product-title-link">
                                    <h4 class="product-title">Esponja</h4>
                                </a>
                                <div class="product-price">
                                    <span>2.00 €</span>
                                </div>
                                <div class="product-buttons">

                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="grid-product-box">
                        <div class="item">
                            <div class="product">
                                <div class="picture">
                                    <a href="#" class="product-image">
                                        <img src="img/cloth.jpg">
                                    </a>
                                </div>
                                <div class="star-ratings-sprite">
                                    <span class="rating"></span>
                                </div>
                                <a href="#" class="product-title-link">
                                    <h4 class="product-title">Esponja</h4>
                                </a>
                                <div class="product-price">
                                    <span>2.00 €</span>
                                </div>
                                <div class="product-buttons">

                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="grid-product-box">
                        <div class="item">
                            <div class="product">
                                <div class="picture">
                                    <a href="#" class="product-image">
                                        <img src="img/esponja.jpg">
                                    </a>
                                </div>
                                <div class="star-ratings-sprite">
                                    <span class="rating"></span>
                                </div>
                                <a href="#" class="product-title-link">
                                    <h4 class="product-title">Esponja</h4>
                                </a>
                                <div class="product-price">
                                    <span>2.00 €</span>
                                </div>
                                <div class="product-buttons">

                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="grid-product-box">
                        <div class="item">
                            <div class="product">
                                <div class="picture">
                                    <a href="#" class="product-image">
                                        <img src="img/cotton.jpg">
                                    </a>
                                </div>
                                <div class="star-ratings-sprite">
                                    <span class="rating"></span>
                                </div>
                                <a href="#" class="product-title-link">
                                    <h4 class="product-title">Esponja</h4>
                                </a>
                                <div class="product-price">
                                    <span>2.00 €</span>
                                </div>
                                <div class="product-buttons">

                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="grid-product-box">
                        <div class="item">
                            <div class="product">
                                <div class="picture">
                                    <a href="#" class="product-image">
                                        <img src="img/cloth.jpg">
                                    </a>
                                </div>
                                <div class="star-ratings-sprite">
                                    <span class="rating"></span>
                                </div>
                                <a href="#" class="product-title-link">
                                    <h4 class="product-title">Esponja</h4>
                                </a>
                                <div class="product-price">
                                    <span>2.00 €</span>
                                </div>
                                <div class="product-buttons">

                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>

https://jsfiddle.net/y0yLnuw6/2/

0 个答案:

没有答案