故事： 我有一个有一些文字的链接。链接的一部分应该有点不同（不同的大小和颜色）。
HTML：
<a href="#">Lorem Ipsum <span>Lorem Ipsum</span> Lorem Ipsum</a>
CSS：
a { color: blue; text-decoration: underline; }
a span { color: yellow; font-size: 2em; }
问题： 无论我做什么，我都无法找到一个很好的方法让跨度文本下的线与文本颜色相同。
我能看到的唯一解决方案是在a-tag上设置 text-decoration：none 并为每个子项设置它。但这对我来说似乎不是一个好方法。
我在Firefox v12（Windows和Ubuntu），Opera v11，IE v7，IE v9，Safari v5.1和Chrome（夜晚）中进行了测试......
只有Firefox和Opera似乎有这个问题（Opera甚至比Firefox差，但我对Opera并不在意）。
编辑： 我的目标不是完全摆脱线，而是改变颜色（通过任何解决方案）。正如我从克里斯写的答案中看到的那样，我认为它必须像过度绘画一样。这至少在IE和Webkit-Browsers中看起来如何。
示例： 这是一个扩展示例的链接： http://jsfiddle.net/r2dhb/3/
更新 确切地说，CSS3中会发生一些变化http://www.w3.org/TR/css3-text/#decoration，但我不在乎，因为任何浏览器都不支持这些东西：）
答案 0 :(得分：2)
引言来自http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration
后代元素上的'text-decoration'属性不能有任何属性 对祖先的装饰有影响。在确定位置 和文本装饰线的厚度，用户代理可以考虑 后代的字体大小和主要基线，但必须使用 每条线上的基线和厚度相同。相对定位一个 后代移动影响它的所有文本装饰以及 后代的文字;它不会影响装饰的计算 该行的初始位置。
上面的引用并不像它可能那样明确，但暗示父元素无论其子项的下划线状态如何都会有下划线。它还表明下划线的厚度应始终保持一致。
文本修饰所需的颜色必须来自 'text-decoration'所在元素的'color'属性值 组。即使是后代，装饰的颜色也必须保持不变 元素具有不同的“颜色”值。
这第二个引用表明，对于给定元素下划线，颜色应该保持不变。因此，当在黄色文本下面时，不改变颜色是按照规范。
我会同意，应该有某种方式允许你关闭下划线，但我认为你应用下划线到个别div的工作可能就是你所拥有的。
答案 1 :(得分：0)
这是我的解决方法（仅限Firefox）：
a span.test3 { text-decoration: underline; vertical-align: 4%; }
因此，子（span）下划线应隐藏父（a）下划线。
当然下划线仍然更厚，但也许你可以在CSS3中改变它？！
感谢。