锚标记可点击区域比图像内

较大的看到了这个问题问了好几次，但似乎是解决方案的一部分但不是别人的工作：锚标记可点击区域比图像内

代码如下：

.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

不，不需要为'a'标签设置不必要的h/w。 – 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

您在发布之前尝试过吗？ –

锚标记可点击区域比图像内

回答

相关问题