Question

I am working on a small Codepen project for practice, below is the code in question:

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

The full code pen is here: http://codepen.io/SethHerning/pen/2ecd822daae0fecbdd7b6cafa664b6d7?editors=1100#0（第18-32行）。

所有链接都适用于Firefox和Edge，但前两个链接不适用于Chrome或Opera。我通过验证器运行代码，唯一的错误是img标签上没有alt属性。我错过了所有链接都无法正常工作？

Answer 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

<a> tags not working in Chrome

1 个答案: