在IE兼容模式下第一次开机自检链接不工作？
我在我的一个网站上遇到了一个非常令人沮丧的问题，我无论如何也找不出是什么原因造成了这个问题--所以我希望这里有人能帮我指出这个问题。
出于某种奇怪的原因，在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标记是有效的(据我所知)，所以我也不认为这是问题所在。
我就是搞不明白这是什么。不仅如此，我不确定我是否应该为这样一个小问题而烦恼；但同时，我想尝试让它尽可能地跨浏览器兼容。
有什么建议或想法吗？
回答 1
Stack Overflow用户
发布于 2013-02-04 17:22:57
正如我在评论中提到的，我需要看到生成的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>这会将淡入淡出包装器类添加到现有的DOM元素(如果JavaScript可用)，而不是直接将元素写入页面。由于我想象淡入淡出动画将使用DOM方法，这应该会使回退更合适。
https://stackoverflow.com/questions/14679186
复制相似问题
腾讯云开发者
