Question

我注意到如果我想让链接的可点击区域等于父级并使用：

a {
 width: 100%;
 height: 100%;
 display: block;
 padding: 10px;
}

在firefox mobile（应用）中无法点击填充区域。如果我删除填充到a并将其添加到父级，则填充区域在所有浏览器（也是dekstop）中都不可点击。问题是我想要一个等于父级大小的链接（但我也希望它有一个填充，否则所有大小都是小的）。

我希望你能帮助我，对不起我的英语。非常感谢...

代码：

<div class="tabchiaro">
 <b><a href="#link">Arco</a></b>
</div>

div.tabchiaro a {
 display: block;
 height: 100%;
 padding: 4px 0 4px 5px;
 width: 100%;
}


div.tabchiaro:hover {
 background-color: #d2ae71;
}


div.tabchiaro:hover a {
 color: #404040;
}

Answer 1

您提出的代码应该有效。

它们可能是您的代码的其他部分，使该区域无法点击。如果您想提供项目链接，我可以为您提供更多帮助。

Answer 2

您最好使用CSS动画属性，例如webkit，-o-，以支持所有浏览器的ur padding属性。查看w3schools了解更多信息。

Answer 3

检查display: inline-block。另一个想法是使用outline: 1px solid red检查该框。

Answer 4

问题是你希望链接的高度为100％，而不指定父元素的高度，在本例中是带有类tabchiaro的div。

某些浏览器会自动＆＃34;修复＆＃34;这对你来说，所以你可能认为你的代码在它实际上不是正确的时候是正确的。

如果你想解决这个问题，你必须：

1）设置父元素的高度，如

div.tabchiaro  {
   height:50px
}

2）使用像素而不是百分比设置锚点的高度，因为为了使百分比值适用于高度，必须确定父级的高度。唯一的例外是根元素<html>，它可以是百分比高度。

希望有所帮助

Answer 5

易于修复。就这样做：

<div class="tabchiaro">
 <b><a href="#link">Arco</a></b>
</div>

div.tabchiaro {
 box-sizing: border-box;
}

div.tabchiaro, div.tabchiaro a {
 position: relative;
 display: block;
 width: 100%;
}

div.tabchiaro a {
 padding: 12px 0 12px 10px;
}


div.tabchiaro:hover {
 background-color: #d2ae71;
}


div.tabchiaro:hover a {
 color: #404040;
}

注意：我夸大了填充量，所以它更明显。

这是一个小提琴：https://jsfiddle.net/3zf7bejq/1/

让我知道它是否有效！：）

在Firefox中移动（app）无法点击href链接中的填充？错误？

5 个答案: