javascript - 突出显示背景 Pane 大于链接对象且无填充的链接

Question

http://jsbin.com/OkaC/1/edit

HTML:

<ul>
    <li>
      <a class='active' href='#'>Link</a></li>
    <li><a href='#'>Link</a></li>
</ul>

CSS:

.active {
    background:grey;
    border-radius:2px;
    padding:4px;
}

这是我试图实现的基本示例 - 突出显示效果比链接元素本身更大的普通链接。这里我使用了填充，但它破坏了页面视觉结构的一致性——突出显示的链接相对于常规链接移动了。
我想到的可能的解决方案:

• 为所有链接添加填充。
• 使用 JS，将事件链接切换为使用当前坐标的绝对定位。

还有其他解决办法吗？

Answer 1

您还可以添加负边距以移除链接周围的多余空间:

a {
    padding: 4px;
    margin: -4px;
}

其他方法是添加轮廓而不是填充:

a {
    outline: 4px solid grey;
}