We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS



对于 Web 设计者来说, 想移除其设计中某些 (或全部) 超链接的下划线是相当常见的事情。但是由于在过去浏览器中的一些不标准的行为, 一些人在删除超链接中下划线的正确方法方面存在一些问题。最常见的错误是这样做:

<a href="link.html">
<span style="text-decoration: none;">一个链接</span>



了解如何正确删除下划线之前,我们先了解一下修饰线(decoration 下同)是如何被应用的。首先,让我们先思考一个 span 在一个 p 中会是什么样子。

<p><span style="text-decoration: underline;">





现在,让我们添加再添加一个 span 嵌套在之前的 span 里面。然后再给后加的 span 一个不一样的线样式:

<p><span style="text-decoration: underline;">
<span style="text-decoration: overline;">额外的</span> 




我们发现此例的 “额外的” 一词出现了既有上划线也有下划线的情况。但是这为什么呢?我们仅给最里面 span 标签设置了上划线。text-decoration 的值并不会被继承。那么为什么 “额外的” 下面会有下划线呢?

现在让我们把最里面 span 的文字颜色(color 下同)改一下,比如红色,我们就能知道怎么回事了。




上划线和文字一起变成了红色,但是下划线并没有。这是因为下划线实际上是外面 span 的一部分,它只是在最里面 span 的下方经过而已。如果我们给外面的 span 加个背景,我们一般是希望背景也能穿过里面 span 显示出来。同样的,父级的文字修饰线就会显示在子级元素上,即使你并没有给子级元素设置或继承修饰线。

现在,让我们明确地移除里面 span 的修饰线样式。

<p><span style="text-decoration: underline;">
<span style="text-decoration: none; color: red;">额外的</span> 

这样意味着不应有任何修饰线样式在里面的 span 上,但是这样并不会阻止外面的 span 显示下划线。这就和 “把里面 span 的背景设为透明并不会让我们看不到外面 span (或者 body 之类的) 的背景” 一样。我们可以在下面看见,下划线仍旧是外面 span 的颜色。




那么让我们考虑一下这种情况:你在一个超链接 a 里添加了一个 span ,如果你想移除链接的下划线。但是因为上面所说的原因,你是没办法这样达成目的:

<a href="http://developer.netscape.com/">这个链接
<span style="text-decoration: none; font-weight: bold;">


Figure 5




答案很简单:The answer is simple: if you don't want a link to have an underline, then turn off the underlining for the link itself. Don't try to override the decoration with a span inside the link. It won't work in properly written browsers, and even if it did it would be a wasteful practice.

For example, let's say you wanted to remove the underlining from all hyperlinks throughout the document. That's as easy as:

a:link, a:visited {text-decoration: none;}

Another common situation is to remove the underlines from only a select set of links. For example, navigation links across the top of a page are often a target for the no-underline treatment. In that case, your best bet is to class (or ID) an element that those links share in common, and then write styles accordingly. For example, suppose you have all of your links in a table. Adding an id attribute to the table itself is the way to go.

<table id="navbar">
<td><a href="link1.html">Home</a></td>
<td><a href="link2.html">Electronics</a></td>
<td><a href="link3.html">Accessories</a></td>
<td><a href="link4.html">Software</a></td>
<td><a href="link5.html">Checkout</a></td>

With the id in place, we can now write a single CSS rule:

table#navbar a {text-decoration: none;}

The biggest beneficial side-effect is that it's possible to expand on this rule to give the links other styles. For example:

table#navbar a {text-decoration: none; color: yellow;
font: 10px sans-serif; letter-spacing: 1px; padding: 0 1em;}

Of course, you could put classes directly on the links you wish to style, and in some cases that's necessary. However, in the majority of cases, authors will be well served by an approach similar to the one shown here.


This article has focused on underlines because they are by far the most common text decoration in use on the Web. However, the principles discussed here apply to any form of decoration. If text is styled with a strike-through line, then that will run through the element's text and the text of any descendant elements, no matter what value they are given for text-decoration. As an example:

<p style="text-decoration: line-through;">
This text has been 
<span style="text-decoration: none; color: red;">stricken</span> 
with a line.

The text in this paragraph will all be stricken, although the word "stricken" will be red. This is shown in Figure 6.

Figure 6


Although some browsers will let you get away with it, the use of span to "switch off" text decorations is not correct CSS and will not work in CSS-conformant browsers. Thus, many Web sites authored to proprietary behavior will not display as the designer intended in more recent browsers. Fortunately, there are several benefits to abandoning this legacy code practice in favor of directly styling hyperlinks.


  • Do not try to style links with span elements; the practice is wasteful and cannot be used to "remove" text decorations such as underlines in CSS-conformant browsers.
  • Make use of CSS selectors and the ability to class or ID elements to bring efficiency to your CSS.


  • 作者: Eric A. Meyer, Netscape Communications
  • 最后更新: Published 2002年3月5日
  • 版权信息: Copyright © 2001-2003 Netscape. All rights reserved.
  • 注意: This reprinted article was originally part of the DevEdge site.



此页面的贡献者: zsxeee, ziyunfei, Y001, Bonede
最后编辑者: zsxeee,