Css 点击链接的父元素上的高亮显示，而不是链接本身？

我使用负边距使链接大于其容器，并隐藏父元素的溢出。我这样做的原因在这一问题中作了解释：

这是一把小提琴：

问题是轻触高亮显示的元素比其容器大。如果你在上面的链接上使用像iPhone这样的设备，你就会明白我的意思

要解决此问题，请将链接设置为具有此CSS规则：

-webkit-tap-highlight-color: rgba(0,0,0,0); 

但是，我想在链接的可见区域点击高亮显示。我尝试将点击高光颜色设置为

li

，例如

-webkit点击高光颜色：rgba（100100,0.6）但它似乎什么都没做。请看这里：

如何仅在链接的可见区域上使用点击高光颜色
 考虑到我对您的问题理解正确-您对突出显示的区域在链接边缘溢出感到恼火，正如我从Google images获得的以下图片所示，以说明问题：


和您希望所有链接的高度都相同，无论它们包含多少文本

首先，我将更正标记以适合您的
表格单元格
显示逻辑。正如您所知，一个表有三个主要元素-
表、表行、表单元格
-您缺少了
表行
元素，这会导致跨平台渲染不正确

我将按以下方式执行HTML：

<div class="link-list">
    <div class="link-list-row">
        <a href="#">Link 1</a>
        <a href="#">Link 2 which has very very very long text and loger</a>
        <a href="#">Link 3</a>
    </div>
</div>

.link-list {
    display:table;
    width:100%;
}
.link-list-row {
    display:table-row;
}
a {
    display:table-cell;
    padding: 10px;
    width:33.3%;
    heigth:100%;
    background: grey;
    padding: 10px;
    border: 2px solid red;
    overflow:hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* disable the highlight */
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

您的突出显示现在被禁用，您的
考虑到我正确理解了您的问题-您对突出显示的区域在链接边缘溢出一点感到恼火，正如我从Google images获得的以下图像所示，以说明问题：


和您希望所有链接的高度都相同，无论它们包含多少文本

首先，我将更正标记以适合您的
表格单元格
显示逻辑。正如您所知，一个表有三个主要元素-
表、表行、表单元格
-您缺少了
表行
元素，这会导致跨平台渲染不正确

我将按以下方式执行HTML：

<div class="link-list">
    <div class="link-list-row">
        <a href="#">Link 1</a>
        <a href="#">Link 2 which has very very very long text and loger</a>
        <a href="#">Link 3</a>
    </div>
</div>

.link-list {
    display:table;
    width:100%;
}
.link-list-row {
    display:table-row;
}
a {
    display:table-cell;
    padding: 10px;
    width:33.3%;
    heigth:100%;
    background: grey;
    padding: 10px;
    border: 2px solid red;
    overflow:hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* disable the highlight */
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

您的突出显示现在被禁用，您的
为什么要使用负边距？如果您使用的是
display:table
-您可以将
设置为父li的
100%
宽度和高度。现在你给了链接一个-10em的边距-我看不出这样做的理由（转换成像素，它给了链接一个-100px的边距）。你到底为什么要使用负边距？如果您使用的是
display:table
-您可以将
设置为父li的
100%
宽度和高度。现在你给了链接一个-10em的边距-我看不出这样做的理由（转换成像素，它给了链接一个-100px的边距）。