<a> 标签在 Chrome 中不起作用答案

【问题标题】：<a> tags not working in Chrome<a> 标签在 Chrome 中不起作用
【发布时间】：2017-05-19 08:51:24
【问题描述】：

我正在做一个小的 Codepen 项目以供练习，下面是有问题的代码：

<div class="social-links">
    <a href="https://twitter.com/" target="_blank">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/367287/twitter.svg">
    </a>
    <a href="https://medium.com/" target="_blank">
        Link
    </a>
    <a href="https://medium.com/" target="_blank">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/367287/medium.svg">
   </a>
   <a href="https://medium.com/" target="_blank">
       <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/367287/medium.svg">
   </a>
</div>

完整的代码笔在这里：http://codepen.io/SethHerning/pen/2ecd822daae0fecbdd7b6cafa664b6d7?editors=1100#0（第 18-32 行）。

所有链接都可以在 Firefox 和 Edge 中使用，但前两个在 Chrome 或 Opera 中不可用。我已经通过验证器运行了代码，唯一的错误是 img 标签上没有 alt 属性。我错过了什么，所有链接都不起作用？

【问题讨论】：

什么是无效链接？你到底是什么意思？

标签： html google-chrome hyperlink

【解决方案1】：

您正面临此处定义的 50% 阻塞问题：webkit transform blocking link

不过有一种解决方法，在您的 CodePen 中通过添加特定的 Chrome 样式 -webkit-transform: rotateY(180deg) translateZ(1px) 来修改您的 css：

.member:hover > div {
   transform: rotateY(180deg);
   -webkit-transform: rotateY(180deg) translateZ(1px);
}

这是错误：https://bugs.webkit.org/show_bug.cgi?id=54371

【讨论】：