使用 CSS text-decoration: underline 时删除一个像素的间隙答案

【问题标题】：removing the one pixel clearance when using CSS text-decoration: underline使用 CSS text-decoration: underline 时删除一个像素的间隙
【发布时间】：2012-08-07 13:30:43
【问题描述】：

我的网站上有以下 CSS 和标记，当我将鼠标悬停在 Account 链接上时会产生下划线。

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

如果可能的话，我希望我网站上的所有链接都使用这个。

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>

【问题讨论】：

您可以使用 border-bottom 和 0 padding-bottom 复制它。
@ajm 你有例子吗？ 0 表示边框底部和填充底部？
Christoph 下面的回答应该是诀窍。
@ajm 看看 jsFiddle 示例。我不确定是不是这样。
你看我的评论了吗？对你有用吗？

标签： html css stylesheet styling text-decorations

【解决方案1】：

是的，您可以使用底部边框，但您需要启用 inline-block 样式才能正确调整锚点的行高：

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;
}

jsFiddle DEMO

【讨论】：

【解决方案2】：

您希望将<a> 设为一个块，否则填充不会产生任何影响。

a { display: block; line-height:0.75em; ... etc }

a:hover { border-bottom:1px solid #000; }

http://jsfiddle.net/y49jN/3/

【讨论】：

如果他想让锚点显示在文本行中，这将不起作用。
@Christoph 内联元素永远无法指定填充或边距或宽度或高度。至少据我所知。
@Kirean 好吧，我很抱歉，但你们都错了。当然，如您在 mcp 的小提琴中所见，内联元素会受到/可以具有填充的影响。只是它没有考虑到外部元素尺寸，因为内联元素没有自己的块上下文。宽度不能声明，这是真的。这篇文章可能会帮助你理解：maxdesign.com.au/articles/inline
@Christoph 好文章。我通常不会只声明左/右填充，所以我过度概括了，因为没有应用顶部/底部填充，所以没有一个。很高兴知道。

【解决方案3】：

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

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

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

display:inline-block; 是 line-height 正常工作所必需的。

【讨论】：

嗯...它似乎对使边框/线条更接近文本没有任何影响。例如，你能在 jsFiddle 中看到这个工作吗？
这里是 jsFiddle 上的代码 - jsfiddle.net/y49jN - 我似乎无法让它工作。可以吗？
当然，jsfiddle.net/poikl/y49jN/1 - 您需要为内联元素添加显示类型。
@crmpicco 您需要注意字体大小，它可能因浏览器/操作系统而异。微调可能会有点乏味。

【解决方案4】：

我还发现，将 div、span 或 p 的height 设置为小于font-size 并使用border-bottom: 1px solid black 而不是text-decoration: underline 会使边框更接近文本或元素。

【讨论】：