0
내 사이트는 FF로 Chrome에서 완벽하게 작동하지만 IE는 내 미디어 쿼리를 완전히 무시하고 내 플로트 : 왼쪽 요소를 망칩니다. 요소는 3 행 3 열의 테이블에 설정된 9 개의 이미지입니다 (하지만 응답 속도는 부동 소수점을 사용합니다). 첫 번째 행은 올바르게 표시되지만 상기 제 2 열은 다음과 같이, 해당 행에 제 사진 범핑 엉망 :
PHOTO PHOTO
플로트 및 미디어 쿼리가 IE에서 작동하지 않습니다
PHOTO PHOTO PHOTO을 PHOTO
PHOTO PHOTO PHOTO
그것이 있어야 할 때 :
PHOTO PHOTO PHOTO
PHOTO PHOTO PHOTO
PHOTO PHOTO PHOTO 다시 말하지만, 이것은 단지 IE에서 일어나고, 테스트를 위해 IE 10과 11을 사용하고 있습니다.
#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 :
가 여기 내 CSS의 모든
<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; 최대 너비 : 800px; }' – n1kkou