在 IE 兼容模式下，第一个帖子链接不起作用？

Question

我在我的一个网站上遇到了一个非常令人沮丧的问题，我终其一生都无法弄清楚是什么原因造成的 - 所以我希望这里的某个人也许可以为我指出问题.

出于某种奇怪的原因，在 IE 的兼容性视图中，网站上画廊的第一个链接不是从整个图像链接，而是从标题链接。预期的行为（在其他浏览器中可见）是，无论点击该图像的哪个位置，它都应该链接。

为了进一步增加混乱，第一个链接之后的其余链接都可以正常工作。更令人困惑的是，将鼠标悬停在第一个链接上看起来就像一个链接（它显示链接标题，甚至是超链接；它只是没有指向任何地方）。

如果我描述得不够好，这里有一张图片说明了这个问题： 网址是http://kaitlynpaynephotography.com

我目前正在使用 Wordpress 作为网站的引擎，但我认为这不是问题所在。 我目前用于主循环的代码是：

<?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，因此在 a 中包含标题和 p 标签是有效的（据我所知），所以我认为这也不是问题。

我只是不知道它是什么。不仅如此，我不确定我是否应该为这样一个小问题而烦恼；但同时，我想尝试让它尽可能跨浏览器兼容。

有什么建议或想法吗？

Answer 1

正如我在评论中提到的，我需要查看生成的 HTML 源代码（包括第一行和 DTD），但我最初的想法是 script 块看起来很丑，尤其是巨大的 cmets。 IIRC 这种风格的 cmets 早在 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 可用，这将把 fade-wrapper 类添加到现有的 DOM 元素中，而不是将元素直接写入页面。由于我想象淡入淡出动画会使用 DOM 方法，这应该使后备更合适。