链接的可点击区域

Question

我有一个奇怪的情况。我有一个非常奇怪的可点击区域的简单链接。我可以单击链接的上方和下方，但是当我将鼠标放在字母上时，无法单击该链接。我试图扩展可单击区域，但它仅在文本之外扩展。因此，如果用户直接单击链接的文本，则不会发生任何事情。我在页面上还有其他链接，它们工作正常。所以您可能知道，可能是什么问题？

<div class="row">
    <div class="col-md-6 col-md-offset-6">
        <a href="web.html" id="webMore">Erfahren Sie mehr</a>
    </div>
</div>

我的链接具有以下风格。

a {
   display: block;
   color: $mainOrange;
   position: relative;
   &:hover {
       text-decoration: none;
       color: $hoverOrange;
   }
   &:visited {
       text-decoration: none;
       color: $mainOrange;
   }
   &:after {
       top: -10px; bottom: -10px;
       right: -10px; left: -10px;
   }
}
#webMore {
   position: relative;
   top: 25px;
   font-size: 25px;
}

Answer 1

可能是您的浏览器是否完美支持...您必须尝试

-o-代表歌剧

-moz-用于Mozilla

-webkit-对于其他浏览器，请执行以下操作>

<pre>

    a {
   display: block;
   color: $mainOrange;
   position: relative;
     -webkit-color: $mainOrange;
     -webkit-position: relative;


   &:hover {
       text-decoration: none;
       color: $hoverOrange;
       -moz-text-decoration: none;
       -moz-color: $hoverOrange;
       -webkit-text-decoration: none;
       -webkit-color: $hoverOrange;
       -o-text-decoration: none;
       -o-color: $hoverOrange;
   }
   &:visited {
        -webkit-text-decoration: none;
       -webkit-color: $mainOrange;
       //same for -o-  & -moz-
   }
   &:after {
       top: -10px; bottom: -10px;
       right: -10px; left: -10px;
       //same for -o-  & -moz-
   }
}
#webMore {
   position: relative;
   top: 25px;
   font-size:25px;
}
//HTML CODE AS IT IS
    <div class="row">
    <div class="col-md-6 col-md-offset-6">
        <a href="web.html" id="webMore">Erfahren Sie mehr</a>
    </div>
</div>
</pre>