无法让 div 在 IE9 中正确呈现

Question

我正在构建的这个网页有 10 个 div 类，它们堆叠成两行（顶部 5 个，底部 5 个）。每个里面都有一个图像。 Chrome 和 Firefox 正在正确呈现所有内容，除了一个不应该显示为超链接的小文本短语（有关更多信息，请参阅本文底部）。这向我表明我的代码中的某些内容已关闭，但我一生都无法弄清楚是什么。在我 FTP 将其上传到实时站点之前，一切看起来都很正常。非常感谢您的帮助。

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&amp;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：

#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;
}

这是我遇到问题的链接：http://www.officesolutions.com/technology-products.html

最后一个问题（如果有人可以提供帮助，我真的认为这是一个奖励）。页面底部“产品类别”最左侧的类别呈现为超链接（特别是 lexmark 徽标应该的链接直接到）。我无法弄清楚，因为该短语附近根本没有任何标记。它只是应该是一个标题，但由于某种原因显示为一个链接。

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 &amp; Space Planning</a></li>
                <li><a href="facility-maintenance-supplies.html">Facility &amp; Maintenance Supplies</a></li>
                <li><a href="coffee-services.html">Coffee Services</a></li>
                <li><a href="printing-promotional-products.html">Printing &amp; Promotional Products</a></li>
                <li><a href="technology.html">Technology</a></li>
              </ul>
            </div>
         </div>
      </div>

Answer 1

我很困惑第二个和第一个问题接缝是否与链接结转相同？在您的实际问题中看不到任何有关 IE9 显示问题的信息？

第二个问题在检查您的代码时，该列表中的任何链接都没有结束标记。

您那里可能没有最新版本，或者可能由于某些非常奇怪的原因而被删除。

代码原样：

 <div class="featuredBrands"><a href="http://www.attvtedetails.com" target="_blank"><img src="images/Brand Logos/ATT.jpg" width="150" height="150" alt="AT&amp;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>

Answer 2

您在第一个代码块的图像末尾缺少结束锚标记。添加它们，这可以解决您的问题。其他一些浏览器会考虑到此类错误并自动正确呈现，而 IE 则不会。您还可以通过 W3C 标记验证器运行您的代码，它会告诉您一堆错误在哪里。