我正在使用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>