翻转停止在 IE8 中工作的链接（WP 子主题）

Question

我制作了一个 Destin Basic 的儿童主题，它在 Firefox/Safari/Chrome 中适用于它的主要受众。卡在IE8上的同事也想用，但是links不行。我没有意识到 figure 或 figcaption 标签的 IE8 问题，翻转是基于这些标签。

父主题使用 'Julia' 翻转 - CSS 似乎隐藏了 a，因为 'View more' 没有显示。在 IE8 中，图像更改指针但 link 不触发（文本不在变暗的背景上，等等）。

我现在太过分了，所以只是想解决 link 的问题。我一直在反复考虑各种选择，但不确定什么是最好的方法：

尝试找出脚本来让 HTML5shiv 工作（父主题 link 似乎没有帮助）？ 
其他脚本解决方案（在head或selectivizr，响应，CSS派）？
添加条件语句以将 divs 放入代码中然后为 IE 设置样式？
为 IE8 和现代浏览器全部更改为 divs 和样式？

来自 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

如果它对其他人有帮助，以下是我为改进我的 Destin Basic child 主题在 IE8 上的外观所做的工作...

CSS：我无法在两个 <p> 上添加背景来让它们阅读主页图片 - 而是删除了它们。请注意，以下代码也会通过删除 'Continue reading' link 来影响类别列表 - 但无论如何每个标题都是 link。（我知道这不是很好的可访问性实践，但 link 本身也不是。）

.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：无法使 respond.js 工作，因此导航显示为 'folded' 状态 (mobile-first)。

仍然无法回答主要问题 - 如何让主页 post link 正常工作。相反，我使用了一个主题小部件 - 'sticky container' 显示最近的 posts。为其他人复制内容，但至少 IE8 用户可以浏览该站点。

编辑：我找到了一个 JQuery 脚本，可以使 link 正常工作：

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

翻转停止在 IE8 中工作的链接（WP 子主题）

Rollovers stop links working in IE8 (WP child theme)

html

javascript

css

internet-explorer

wordpress-theming