1

私が作成しているこのWebページには、10個のdivクラスが2行にスタックされています(上に5つ、下に5つ)。それぞれの中に画像があります。ChromeとFirefoxは、ハイパーリンクとして表示されるべきではないときにハイパーリンクとして表示される1つの小さなテキストフレーズを除いて、すべてを正しくレンダリングしています(詳細については、この投稿の下部を参照してください)。これは、コード内の何かがオフになっていることを私に知らせますが、私は一生の間、何を理解することができません。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

最後の質問(誰かが助けてくれるなら、これは本当にボーナスだと思います)。「製品カテゴリ」ページの下部にある左端のカテゴリは、ハイパーリンク(具体的には、レックスマークのロゴが向けるリンク)としてレンダリングされています。 。そのフレーズの近くにはマークアップがまったくないので、私はそれを理解できません。ヘッダーになっているはずですが、どういうわけかリンクとして表示されています。

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>
4

2 に答える 2

0

最初のコード ブロックのイメージの最後に終了アンカー タグがありません。それらを追加すると、問題が解決する可能性があります。他のブラウザの中には、そのようなエラーを考慮して自動的に適切にレンダリングするものがありますが、IE はそうではありません。W3C Markup Validator でコードを実行することもできます。エラーがどこにあるかがわかります。

于 2013-02-21T00:02:16.373 に答える
0

リンクの持ち越しについて、2 番目と 1 番目の質問の継ぎ目が同じであると混乱していますか? また、実際の質問で IE9 の表示の問題について何も確認できませんか?

コードを検査するときの2 番目の質問は、そのリスト内のどのリンクにも終了タグがありません。

そこに最新バージョンがないか、非常に奇妙な理由で取り除かれている可能性があります。

そのままのコード:

 <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>
于 2013-02-20T23:55:38.110 に答える