2013-12-12 40 views
0

我的网站在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> 

回答

0

首先,在你的HTML和CSS一.teambio类取代#teambio。然后,重新发布您的问题,如果它仍然存在

+0

感谢,我给它一个镜头,但它并没有解决这个问题。 – jesslouko

+0

@jesslouko'.bioimg {display:block;最大宽度:800像素; } – n1kkou

0
<body> 
<div class="teambiowrap">  
    <h3>meet our team</h3> 
    <div class="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 class="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 class="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 class="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 class="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 class="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 class="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 class="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 class="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 class="clear"></div> 
</div> 
</body> 
<script type="text/javascript" src="js/respond.js"></script> 

mediaqueries不支持相同的页面IE浏览器。这一次css extrenal文件的使用,但没有改变你的CSS。另外,您应该注意,在分析和应用媒体查询样式之前,使用respond.js可能会导致您看到非媒体查询样式的延迟。建议您将respond.js放在头文件中以尽可能避免这种情况,不过,将js文件保存在页脚中也非常有用,并且在类中使用id替换也很好。

回应记者:https://github.com/scottjehl/Respond/commit/4d60f45716b8395e6f24238f9dc5e34c857e87f2

+0

同意上面的看到这个帖子说同样的事情:http://stackoverflow.com/questions/16407792/ie7-8-9-not-reading-media-query-properly?rq=1 –