在 Firefox 和 Opera 中改变子元素的下划线颜色（在 IE、Safari 和 Chrome 中有效）

Question

3

故事： 我有一个链接，其中包含一些文本。链接的一部分应该以稍微不同的样式呈现（不同的大小和颜色）。

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

问题：无论我做什么，都找不到一个好的方法让线条与span文本颜色一致。

我唯一能想到的解决方案是在a标签上设置text-decoration: none，并为每个子元素设置它。但这对我来说似乎不是一个好方法。

我已经在Firefox v12（Windows和Ubuntu），Opera v11，IE v7，IE v9，Safari v5.1和Chrome（Nightly）中进行了测试...

只有Firefox和Opera似乎存在此问题（Opera甚至比Firefox更糟糕，但我不太关心Opera）。

编辑：我的目标不是完全摆脱线条，而是改变颜色（通过任何解决方案）。根据Chris所写的答案，我认为它必须是类似于覆盖绘制的东西。这至少是在IE和Webkit浏览器中看起来像这样。

示例：这里有一个扩展示例的链接：http://jsfiddle.net/r2dhb/3/

更新: CSS3 http://www.w3.org/TR/css3-text/#decoration 中肯定会有一些变化，但我不在意，因为这些东西在任何浏览器中都不受支持 :)

- SimonSimCity

我要注意的两件事是，这不仅限于<a>标签的内容，如果你将spans更改为inline-block，它们就不再有下划线了，但你当然会遇到不同的布局问题。我认为这些观察结果可能会有所帮助。 :) - Chris

很有趣。看起来像是浏览器的错误。 - Rodolfo

看起来可能符合规格。<a>被下划线标记，其子元素的样式不应影响它。这就像如果你给元素应用边框一样。你不会期望它在子元素处停止...我正在尝试找到一个适当的非歧义性的w3引用来解决这个问题，然后再发布为答案... - Chris

@Chris 由于text-decoration是用于内联而不是块级样式，我预计它的行为与border有所不同。 - SimonSimCity

2个回答

0

这是我的解决方法（仅适用于Firefox）：

a span.test3 { text-decoration: underline; vertical-align: 4%; }

因此，子元素（span）的下划线应该隐藏父元素（a）的下划线。

当然，下划线仍然更粗，但也许你可以在CSS3中改变它？！

谢谢。

- Chris Cannon

我有点接受这个解决方法，因为它并没有完全破坏在IE和Webkit浏览器中的外观...但是，在Webkit中，该行现在似乎已经断开了。 - SimonSimCity

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris · Accepted Answer

“后代元素上的'text-decoration'属性不能影响祖先的装饰。在确定文本装饰线的位置和粗细时，用户代理可以考虑后代的字体大小和主要基线，但必须在每行上使用相同的基线和厚度。相对定位后代会将所有影响其的文本装饰移动到后代的文本中;它不会影响计算该行上装饰的初始位置。”

以上引述并不十分明确，但暗示父元素无论子元素的下划线状态如何都将有下划线。它还表明下划线的粗细应始终保持一致。

第二段引述表明，文本装饰所需的颜色必须从设置了'text-decoration'的元素的'color'属性值派生出来。即使后代元素具有不同的“color”值，装饰的颜色也必须保持不变。

这第二个引述建议给定元素的颜色确实应该保持不变。因此，当在黄色文本下方进行下划线时，颜色不变是符合规范的。

我同意似乎应该有某种方法允许您关闭下划线，但我认为将下划线应用于单独的div可能是您拥有的全部内容。