代码之家  ›  专栏  ›  技术社区  ›  Phorden

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

  •  1
  • Phorden  · 技术社区  · 11 年前

    我对IE 10中的div可点击有问题。他们有CSS3过渡和转换。它们的动画设置正确,但链接不可单击。这在IE 11、FF和Chrome中正常工作。锚点在IE9及以下版本中也不起作用,但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/

    1 回复  |  直到 11 年前
        1
  •  5
  •   Community Mohan Dere    9 年前

    这似乎是IE中的一个bug,其中锚元素需要背景才能填充空间并最终可单击。尝试在锚标记的规则中添加假背景。

    .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