私のウェブサイトの 1 つで非常に苛立たしい問題が発生しており、何が原因なのか一生わからないので、ここの誰かがそれを指摘してくれることを願っています。
何らかの奇妙な理由で、IE の互換表示で、Web サイトのギャラリーへの最初のリンクが画像全体からではなく、タイトルからリンクされます。予想される動作 (他のブラウザーで見られる) は、クリックされた画像の場所に関係なくリンクすることです。
さらに混乱を招くのは、最初の 1 つを過ぎた残りのリンクがすべて機能することです。さらにややこしいのは、最初のリンクにカーソルを合わせるとリンクのように見えることです (リンクのタイトルとハイパーリンクが表示されますが、どこにもつながりません)。
説明が不十分だった場合に備えて、問題を説明する画像を次に示し ます。Web サイトのアドレスはhttp://kaitlynpaynephotography.comです。
現在、Web サイトのエンジンとして 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 タグを含めることは有効であるため、それも問題ではないと思います。
私はそれが何であるかを理解することはできません。それだけでなく、そのような些細な問題を気にする必要があるかどうかもわかりません。しかし同時に、可能な限りブラウザ間の互換性を持たせたいと考えています。
提案やアイデアはありますか?