故事: 我有一个包含一些文本的链接。链接的一部分应该有一些不同的样式(不同的大小和颜色)。
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 并为每个 child 设置它。但这对我来说似乎不是一个好方法。
我已经在 Firefox v12(Windows 和 Ubuntu)、Opera v11、IE v7、IE v9、Safari v5.1 和 Chrome(Nightly)中对此进行了测试......
似乎只有 Firefox 和 Opera 有这个问题(Opera 比 Firefox 更糟糕，但我不太关心 Opera)。
编辑: 我的目标不是完全摆脱这条线，而是改变颜色(通过任何解决方案)。正如我从克里斯写的答案中看到的那样，我认为它必须像过度绘画一样。至少在 IE 和 Webkit 浏览器中是这样的。
示例: 这是扩展示例的链接: http://jsfiddle.net/r2dhb/3/
更新: CSS3 中肯定会有一些变化 http://www.w3.org/TR/css3-text/#decoration但我不在乎，因为任何浏览器都不支持这些东西:)
最佳答案
引文来自http://www.w3.org/TR/CSS2/text.html#propdef-text-decoration
The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor. In determining the position of and thickness of text decoration lines, user agents may consider the font sizes of and dominant baselines of descendants, but must use the same baseline and thickness on each line. Relatively positioning a descendant moves all text decorations affecting it along with the descendant's text; it does not affect calculation of the decoration's initial position on that line.
上面的引述并不像它应该的那样明确，但暗示父元素将有下划线，无论其子元素的下划线是什么状态。它还建议下划线粗细应始终保持一致。
The color(s) required for the text decoration must be derived from the 'color' property value of the element on which 'text-decoration' is set. The color of decorations must remain the same even if descendant elements have different 'color' values.
第二个引述表明，对于给定的元素下划线，颜色确实应该保持不变。因此，按照规范，黄色文本下方的颜色不变。
我同意，感觉应该有某种方法可以让您关闭下划线，但我认为您所做的工作可能就是将下划线应用于单个 div。
关于html - 在 FF 和 Opera 中更改子元素的下划线颜色(适用于 IE、Safari 和 Chrome)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9978052/