якоря тег интерактивная области больше, чем изображение внутри

Видели этот вопрос задает довольно много раз, но кажется, что решения работают для некоторых, но не других:якоря тег интерактивная области больше, чем изображение внутри

кода выглядит следующим образом:

.headbuttons { 
 
    opacity: .7; 
 
    background-color: grey; 
 
    background-blend-mode: overlay; 
 
    display: block; 
 
}

<a class="headbuttons" id="homebutton" href="C:\Users\Dom Nguyen\Documents\website.html"> 
 
<img src="C:\Users\Dom Nguyen\Documents\home_button.png" width="125" height="62.5"> </a>

Пробовал предлагаемое решение встроенного блока и блока для отображения, но ни одна работающая, кликабельная область все еще намного больше самого изображения.

источник

2016-09-07 Dom

но 'display: inline-block;' отлично работает, вы можете воспроизвести, создать скрипку или что-то еще, как здесь [** JSFiddle **] (https://jsfiddle.net/vivekkupadhyay/xuj7ccyj/1), его рабочий тон , – vivekkupadhyay

Вам нужно установить 'width' и' height' для тега привязки также 'width: 125px; height: 62.5px; ' – Noor

Нет, нет необходимости устанавливать h/w необязательно для тега' a'. – vivekkupadhyay

Просто изменить CSS к следующему, который включает в себя ширину и высоту:

.headbuttons { 
 
    opacity: .7; 
 
    background-color: grey; 
 
    background-blend-mode: overlay; 
 
    display: block; 
 
    width: 125px; 
 
    height: 62.5px; 
 
}

<a class="headbuttons" id="homebutton" href="C:\Users\Dom Nguyen\Documents\website.html"> 
 
<img src="C:\Users\Dom Nguyen\Documents\home_button.png" width="125" height="62.5"> </a>

источник

2016-09-07 04:53:24 JMA

ваше решение правильное с одним изменением: в отличие от применения этих настроек класса к тегу привязки я применил их к недавно созданному тегу класса img, и это сработало – Dom

Я думаю, что вы можете установить с шириной и высотой, что-то выглядит следующим образом: <a width="125" height="62.5">

источник

2016-09-07 04:21:00 canhongpoxiao

Вы пробовали это перед публикацией? –

якоря тег интерактивная области больше, чем изображение внутри

ответ

Смежные вопросы