滚动会阻止链接在IE8 (WP子主题)中工作

Question

我为它的主要受众制作了一个适用于Firefox/Safari/Chrome的Destin Basic的子主题。坚持使用IE8的同事也想使用它，但链接不起作用。我没有意识到IE8与figure或figcaption标签的问题，这是基于翻转的。

父主题使用'Julia'翻转- CSS似乎隐藏a为'View more'不显示。在IE8中，图像改变了指针，但链接不启动(文本不在暗淡的背景下，等等)。

我现在太远了，所以只是试图解决链接问题。我一直在反复考虑各种选择，但不确定什么是最好的方法:

1. 试着找出脚本让HTML5shiv工作(父主题链接似乎没有帮助)?<!--[if IE]><script src="<?php echo BAVOTASAN_THEME_URL; ?>/library/js/html5.js"></script><![endif]-->

2. 其他脚本解决方案(在头部或selectivizr，响应，CSS饼)?

3. 添加条件语句，把divs在代码之间，然后为IE风格?
4. 将所有更改为divs和IE8和现代浏览器的样式?

来自functions.php的代码:

<?php while ( have_posts() ) : the_post(); ?>
<?php if ( is_front_page() ) { ?>
<div class="item">
<figure class="effect-julia">
<?php
if ( has_post_thumbnail() )
the_post_thumbnail( 'home' );
else
echo '<img src="' . BAVOTASAN_THEME_URL . '/library/images/no-image.jpg" alt="" />';
?>
<figcaption>
<h2><?php the_title(); ?></h2>
<div>
<p><?php echo wp_trim_words( strip_shortcodes( get_the_excerpt() ) , 10 ); ?></p>
<p class="more-link-p"><?php _e( 'Continue reading <span class="meta-nav">&rarr;</span>', 'destin' ); ?></p>
</div>
<a href="<?php the_permalink(); ?>"><?php _e( 'View more', 'destin' ); ?></a>
</figcaption>
</figure>
</div>

我对常规CSS很好，但不确定脚本发生了什么。

Answer 1

如果它对其他人有所帮助，这里是我所做的，以改善我的destiny Basic子主题在IE8上的外观…

CSS:我不能在两个<p>上添加背景，使它们在主页图片上阅读-而是删除它们。请注意，下面的代码也通过取出"继续阅读"链接来影响类别列表——但无论如何，每个标题都是一个链接。(我知道这不是很好的可访问性实践，但链接本身也不是。)

.more-link-p {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
.entry-content .more-link-p {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

我使用了下面的代码来恢复图片的暗透明效果(这样白色的文字就可以读了):

.item image {
background-color: #000000;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }

还使用了Phark技术的变体来恢复网站徽标。

Javascript:无法让response .js工作，所以导航显示在"折叠"状态(mobile-first)。

仍然无法回答主要问题-如何让主页帖子链接工作。相反，我使用了一个主题小部件——"粘性容器"来显示最近的帖子。为其他人复制东西，但至少IE8用户可以浏览网站。

编辑:我发现了一个JQuery脚本，使链接工作:

<script>
$(document).delegate("figure", "click", function() {
   window.location = $(this).find("a").attr("href");
});
</script>