Question

我的一个网站上有一个非常令人沮丧的问题，我不能为我的生活找出导致它的原因 - 所以我希望也许这里的某个人可以为我指出它

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

进一步增加混乱，剩下的链接超过第一个ALL工作。更令人困惑的是，悬停在第一个链接上的行为似乎就像一个链接（它显示了链接标题，甚至是超链接;它只是没有引导任何地方）。

如果我没有足够好地描述，这是一个说明问题的图片： red circle doesn't link, blue does 网站地址为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块看起来很难看，尤其是巨大的评论。 IIRC在XHTML验证的早期阶段提出了这种评论风格，并且实际上是不必要的 - 它将验证置于简单解析之上。也许IE“兼容模式”让人感到窒息。

那就是说，我也不太喜欢这个文件。所以我建议你重组如下：

<?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方法，这应该使回退更合适。

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

1 个答案: