我的网站在FF浏览器中完美工作,但IE浏览器完全忽略了我的媒体查询并且弄乱了我的float:left元素。这些元素是9个图像(但我使用浮点数来表示响应),分别为3行和3列。第一行显示正确,但第二行是搞砸了,碰撞了第三张照片到自己的行,像这样:浮动和媒体查询不在IE中工作
图片图片图片
写真照片
PHOTO
图片图片图片
当它应该是:
图片图片图片
图片图片图片
图片图片图片
同样,这仅仅是在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>
感谢,我给它一个镜头,但它并没有解决这个问题。 – jesslouko
@jesslouko'.bioimg {display:block;最大宽度:800像素; } – n1kkou