IE10 -转换后的div上链接不可点击

Question

我在IE 10中有div可点击的问题。它们有CSS3的过渡和转换。它们的动画是正确的，但是链接是不可点击的。这在ie11, FF和Chrome中正常工作。锚也不能在ie9及以下版本中工作，但是CSS转场也不能。我不知道为什么这不能在ie10中工作。

我不会在这里张贴我的CSS，因为它相当长。我已经添加了一个小提琴查看完整的css。

html:

<div class="grid">
    <figure class="effect-bubba columns large-4">
        <img alt="" src="http://www.blackduckmn.com/_images/home/blackduck-minnesota-apple.JPG" />
        <figcaption>
             <h2>Lodging &amp; Dining</h2>
             <p>Whatever you're looking for, Blackduck has a variety of lodging and dining options available!</p> <a href="/visit/lodging-and-dining">View more</a>
        </figcaption>
    </figure>
</div>

JS Fiddle: http://jsfiddle.net/phorden/oysn4rgv/

活动页面:http://www.blackduckmn.com/

Answer 1

这似乎是IE中的一个错误，锚元素需要背景才能填充空间并最终可点击。试着在锚标记的规则中添加一个假背景。

.grid figure a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0px;
    opacity: 0;
    display: block;
    z-index: 100000;
   background: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBR‌​AA7") 0 0 repeat;
}

看看以下问题答案下面评分最高的评论:绝对定位锚标记(不含文本)在IE中不可点击