在IE兼容模式下，第一篇文章鏈接不工作？

Question

我在我的一個網站上遇到了一個非常令人沮喪的問題，我不能爲了我的生活找出是什麼原因造成的 - 所以我希望這裏也許有人能夠爲我指出它。

由於一些奇怪的原因，當在IE的兼容性視圖中，網站上一個圖庫的第一個鏈接沒有鏈接整個圖像，而是來自標題。預期的行爲（在其他瀏覽器中看到）是它應該鏈接，而不管它被點擊的圖像上的哪個位置。

並且爲了進一步增加混淆，剩餘的鏈接通過第一個ALL工作。更令人困惑的是，懸停在第一個鏈接看起來像一個鏈接（它顯示鏈接標題，甚至超鏈接，它只是不會導致任何地方）的事實。

如果我沒有描述不夠好，這裏是說明問題的圖像： 該網站的地址是我目前使用的WordPress的引擎爲網站http://kaitlynpaynephotography.com

，但我不能看到這是問題。 我目前使用主循環的代碼是：

<?php while (have_posts()) : the_post() ?> 
    <article id="post-<?php the_ID(); ?>" <?php post_class('portfolio-preview'); ?>> 
     <script type="text/javascript"> 
      <!--//--><![CDATA[//><!-- 
      document.write('<div class="fade-wrapper">'); 
      //--><!]]> 
     </script> 
     <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute() ?>" rel="bookmark"> 
      <?php 
      if (has_post_thumbnail()) { 
       the_post_thumbnail(array(215,280), array('title' => '')); 
      }?> 
      <h2 class="gallery-title"><?php the_title(); ?></h2> 
     </a> 
     <script type="text/javascript"> 
      <!--//--><![CDATA[//><!-- 
      document.write('</div><!-- .fade-wrapper -->'); 
      //--><!]]> 
     </script> 
    </article><!-- #post-<?php the_ID(); ?> --> 
<?php endwhile; ?>  

我使用的是HTML5，所以它是有效的具有的一個內部（頭和p標籤，只要我意識到），所以我不認爲這是問題。

我只是無法弄清楚它是什麼。不僅如此，我不確定是否應該爲這樣一個小問題煩惱;但同時，我想嘗試使其儘可能跨瀏覽器兼容。

任何意見或建議？

Answer 1

正如我在評論中提到的那樣，我需要看到生成的HTML源代碼（包括第一行和DTD），但我最初的想法是script塊看起來非常醜陋，特別是巨大的評論。 IIRC這種風格的評論在XHTML驗證的早期就被提出來了，而且真的沒有必要 - 它將驗證放在了簡單的解析之上。也許IE的「兼容模式」令他們窒息。

這麼說，我不太喜歡的document.writes要麼，所以我建議你重新調整如下：

<?php while (have_posts()) : the_post() ?> 
    <article id="post-<?php the_ID(); ?>" <?php post_class('portfolio-preview'); ?>> 
     <div class="fade-if-js"> 
     <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute() ?>" rel="bookmark"> 
      <?php 
      if (has_post_thumbnail()) { 
       the_post_thumbnail(array(215,280), array('title' => '')); 
      }?> 
      <h2 class="gallery-title"><?php the_title(); ?></h2> 
     </a> 
     </div> 
    </article><!-- #post-<?php the_ID(); ?> --> 
<?php endwhile; ?> 


<!-- rest of your HTML content --> 


<script type="text/javascript"> 
    // <![CDATA 

    // this uses jQuery, but use getElementsByClassName, etc... if you prefer plain JS. If using jQuery, you may need to use it in noconflict mode... 
    $(function() { 
     $('.fade-if-js').addClass('fade-wrapper'); 
    }); 

    // ]]> 
</script> 

這將淡入包裝類添加到，如果現有的JavaScript的DOM元素可用，而不是直接將元素寫入頁面。因爲我認爲淡入淡出的動畫會使用DOM方法，所以這應該使回退更合適。