Html 使用CSS文本装饰时删除一像素间隙：下划线

我的网站上有以下CSS和标记，当我将鼠标悬停在

帐户

链接上时，它们会产生一条下划线

默认情况下，下划线显示为距文本一个像素。是否可以在没有一个像素间隙的情况下将下划线直接放在文本下方

我想这对我的网站上的所有链接，如果可能的话

a:active {
    outline: none;
}

a.current {
    text-decoration: underline;
    color: #000000;
    outline: none;
}
a:hover, a.active {
    color: #000000;
    outline: medium none;
    text-decoration: underline;
}

<a href="http://www.ayrshireminis.com/account/login/">Account</a>

a：激活{
大纲：无；
}
a、 当前{
文字装饰：下划线；
颜色：#000000；
大纲：无；
}
悬停，活动{
颜色：#000000；
大纲：中无；
文字装饰：下划线；
}

不，您不能修改它。但是，您可以使用以下内容来伪装它：

a:hover, a.active{
    border-bottom:1px solid black;
}​

a{
    padding-bottom:0;
    display:inline-block;
    line-height:.8 /*adjust accordingly*/;
}

---

显示：内联块是线高度正常工作所必需的。
您希望使
是的，您可以使用底部边框，但您需要启用内联块样式，以便正确调整锚点的线高度：

a {
    text-decoration: none;
    color: #c64;

    /* cross-browser inline-block styling */
    display:inline-block;
    zoom:1;
    *display:inline;

    /* alter line-height until the border appears where you want it */
    line-height: .7em;
}

a:hover, a:active{
    padding-bottom:0;
    border-bottom:1px solid black;
}

我还发现设置div的
高度
，span或p小于
字体大小
，并使用
边框底部：1px纯黑
代替
文本装饰：下划线
使边框更接近文本或元素。
您可以使用
边框底部
和0
填充底部
@ajm复制它。您有例子吗？0表示边框底部和填充底部？Christoph在下面的回答应该是诀窍的答案。@ajm看一看JSFIDLE示例。我不确定是否有。你读过我的评论吗？它对你有用吗？嗯……它似乎对使边界/线条更接近文本没有任何影响。例如，你能看到这个在JSFIDLE中工作吗？这里是JSFIDLE上的代码——我似乎无法让它工作。您可以吗？当然可以，-您需要为内联元素添加一个displaytype。@crmpicco您需要知道字体大小，但不同浏览器/操作系统的字体大小可能不同。微调可能会变得有点乏味。如果他想在文本行中显示锚定，这将不起作用。@Christoph内联元素从未能够指定填充、边距、宽度或高度。至少据我所知。@Kirean好吧，对不起，但你们都错了。当然，内联元素会受到填充的影响，正如您在mcp的小提琴中看到的那样。只是因为内联元素没有自己的块上下文，所以它没有计入外部元素维度。宽度不能声明，这是真的。这篇文章可能会帮助你理解：@Christoph是一篇好文章。我通常不需要只声明左/右填充，所以我过度概括了这一点，因为没有应用上/下填充，所以没有一个应用。很高兴知道。moz-inline-stack真的不再需要了（FF2！），如果你真的想支持那些旧浏览器，我更喜欢把IE声明放到IE样式表中。