Question

我遇到的问题是在IE 10中可以点击div。他们有CSS3过渡并对它们进行转换。它们的动画效果正确，但链接无法点击。这适用于IE 11，FF和Chrome。锚也不会在IE 9及以下版本中工作，但CSS也不会转换。我不知道为什么这在IE 10中不起作用。

我不会在这里发布我的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小提琴：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;
}

查看以下问题答案下方评分最高的评论： absolute positioned anchor tag (with no text) not clickable in IE

IE10 - 链接无法在转换后的div上单击

1 个答案: