1
건물 웹 페이지에 10 div 클래스가 2 행 (5 위, 5 위)으로 스택되어 있습니다. 각각 내부에 이미지가 있습니다. Chrome과 Firefox는 하이퍼 링크로 표시되지 않는 작은 텍스트 문구를 제외하고는 모든 것을 올바르게 렌더링합니다 (자세한 내용은이 게시물의 하단 참조). 이것은 내 규범에있는 것이 꺼져 있음을 나에게 알려주지 만, 내 인생에서 무엇을 알아낼 수는 없다. FTP가 라이브 사이트에 업로드 할 때까지 모든 것이 정상적으로 보입니다. 도움을 많이 주시면 감사하겠습니다.IE9에서 제대로 렌더링 할 div를 얻을 수 없습니다.
HTML :
<div id="text-brands">
<h2 class="blueheader">Learn More About Our Featured Brands</h2>
<br />
<div class="featuredBrands">
<a href="http://www.attvtedetails.com" target="_blank"><img src="images/Brand Logos/ATT.jpg" width="150" height="150" alt="AT&T" /> </a> </div>
<div class="featuredBrands"><a href="http://www.brotherdetails.com" target="_blank"><img src="images/Brand Logos/BROTHER.jpg" width="150" height="150" alt="Brother" /> </div>
<div class="featuredBrands"><a href="http://www.dymodetails.com" target="_blank"><img src="images/Brand Logos/DYMO.jpg" width="150" height="150" alt="Dymo" /></div>
<div class="featuredBrands"><a href="http://www.fujifilmdetails.com" target="_blank"><img src="images/Brand Logos/FUJI.jpg" width="150" height="150" alt="Fuji Film" /> </div>
<div class="featuredBrands"><a href="http://www.hpdetails.com" target="_blank"><img src="images/Brand Logos/HP.jpg" width="150" height="150" alt="HP" /> </div>
<div class="featuredBrands"><a href="http://www.imation-memorexdetails.com" target="_blank"><img src="images/Brand Logos/IMATION.jpg" width="150" height="150" alt="Imation" /> </div>
<div class="featuredBrands"><a href="http://www.kensingtondetails.com" target="_blank"><img src="images/Brand Logos/KENSINGTON.jpg" width="150" height="150" alt="Kensington" /> </div>
<div class="featuredBrands"><a href="http://www.logitechdetails.com" target="_blank"><img src="images/Brand Logos/LOGITECH.jpg" width="150" height="150" alt="Logitech" /> </div>
<div class="featuredBrands"><a href="http://www.verbatimdetails.com" target="_blank"><img src="images/Brand Logos/VERBATIM.jpg" width="150" height="150" alt="Verbatim" /> </div>
<div class="featuredBrands"><a href="http://www.lexmarkdetails.com" target="_blank"><img src="images/Brand Logos/LEXMARK.jpg" width="150" height="150" alt="Lexmark" /> </div>
<br />
<br />
<br />
</div>
CSS : http://www.officesolutions.com/technology-products.html
마지막 질문 (정말 그냥이 사람의 경우 보너스 고려 : 여기
#text-brands {
width: 925px;
float: left;
padding-top: 30px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 20px;
}
.featuredBrands {
margin: 0px;
padding: 10px;
float: left;
width: 150px;
border: 5px solid #EAEAEA;
clear: none;
height: 150px;
overflow: hidden;
}
HTML :
<div id="content-bottom">
<div id="sitelinks">
<div class="column" style="border-left: none;">
<p><strong>Product Categories</strong></p>
<ul>
<li><a href="office-supplies.html">Office Supplies</a></li>
<li><a href="furniture-space-planning.html">Furniture & Space Planning</a></li>
<li><a href="facility-maintenance-supplies.html">Facility & Maintenance Supplies</a></li>
<li><a href="coffee-services.html">Coffee Services</a></li>
<li><a href="printing-promotional-products.html">Printing & Promotional Products</a></li>
<li><a href="technology.html">Technology</a></li>
</ul>
</div>
</div>
</div>
첫 번째 코드 블록의 이미지 끝 부분에 앵커 태그가 없습니다. 추가하면 문제를 해결할 수 있습니다. 다른 브라우저의 일부는 이와 같은 오류를 고려하여 자동으로 적절하게 렌더링하지만 IE는 그렇지 않습니다. 또한 W3C Markup Validator를 통해 코드를 실행할 수 있으며 오류가 많은 곳을 알려줍니다. – Ian