Доступная площадь ссылки

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

Пожалуйста, проверьте другие CSS стиль в элемент, потому что я проверил код на пустой странице - он отлично работает.

Если это не проблема с CSS, проверьте свои JS-скрипты или HTML.

Answer 2

Может быть ваш браузер поддерживает совершенно или нет ... Вы должны попробовать

-О- для оперы

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