【发布时间】：2013-12-31 11:34:51
【问题描述】：
我的网站在 FF 中的 Chrome 中完美运行，但 IE 完全忽略了我的媒体查询并弄乱了我的 float: left 元素。这些元素是 3 行 3 列的表格中设置的 9 个图像（但我使用浮点数进行响应）。第一行显示正确，但第二行混乱，将第三张照片撞到自己的行上，如下所示：
照片照片照片
照片 照片
照片
照片 照片 照片
什么时候应该：
照片照片照片
照片 照片 照片
照片 照片 照片
同样，这仅在 IE 中发生，我使用 IE 10 和 11 进行测试。
这是我的 CSS：
#teambiowrap
{
width: 100%;
clear: both;
}
#teambio
{
width: 28%;
float: left;
padding: 2.5%;
margin-bottom: 10px;
text-align: justify;
}
.bioimg
{
width: 99%;
max-width: 800px;
min-width: 100px;
}
@media screen and (max-width:800px) {
#teambio {
float: none;
width: 90%;
padding: 5%;
}
}
还有 HTML：
<div id="teambiowrap">
<h3>meet our team</h3>
<div id="teambio">
<img class="bioimg" src="Images/bioexample.png"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div id="teambio">
<img class="bioimg" src="Images/chris.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div id="teambio">
<img class="bioimg" src="Images/andy.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div id="teambio">
<img class="bioimg" src="Images/tim.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div id="teambio">
<img class="bioimg" src="Images/dave.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div id="teambio">
<img class="bioimg" src="Images/jim.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div id="teambio">
<img class="bioimg" src="Images/jess.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div id="teambio">
<img class="bioimg" src="Images/amanda.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
<div id="teambio">
<img class="bioimg" src="Images/victor.jpg"><br><br><strong>NAME</strong> Position<br><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet tempor tellus. Nulla sed ligula in tellus eleifend ullamcorper. Nunc mi neque, interdum nec nulla id, hendrerit lacinia mi. Ut gravida libero ac tristique elementum. Nam tristique dui quis metus accumsan luctus. Vestibulum dictum.
</div>
</div>
【问题讨论】：
标签： html css internet-explorer css-float media-queries