0

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

出于某种奇怪的原因，在 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 标签是有效的（据我所知），所以我认为这也不是问题。

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

有什么建议或想法吗？

4

1 回答 1

0

正如我在评论中提到的，我需要查看生成的 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 可用，这会将 fade-wrapper 类添加到现有的 DOM 元素中，而不是将元素直接写入页面。因为我想象淡入淡出动画会使用 DOM 方法，这应该使后备更合适。

于 2013-02-04T09:22:57.293 回答