使用 css 更改下划线颜色在 chrome 中不起作用？答案

【问题标题】：Changing underline color with css doesn't work in chrome?使用 css 更改下划线颜色在 chrome 中不起作用？
【发布时间】：2012-07-02 14:32:53
【问题描述】：

我正在尝试使用跨度在悬停事件期间更改下划线颜色，它在 IE9 和 Firefox 13.01 中有效，但在 Chrome 中无效（它应该在金色下划线）。

#menu li:hover span.underline { text-decoration:underline; color: #FAA301; }

<ul id="menu"> <li style="z-index: 7;"><span class="underline"><a href="#">link1</a></span></li> </ul>

这里是 js.fiddle：http://jsfiddle.net/wuUpL/7/。

我最初是从这篇帖子 https://stackoverflow.com/a/1175402/1490248 中得到这个想法的，但这个想法也不适用于 chrome。

注意：我不想使用边框来解决这个问题，我已经在使用边框作为边框

有人可以帮我吗？我可以使用某种 chrome hack/异常来解决这个问题吗？

【问题讨论】：

标签： html css underline

【解决方案1】：

我知道你说过你不想在这里使用边框，但是你发现了一些在两个浏览器之间不一样的东西。

您可以通过添加 inner span 并在其上使用边框来使其在 Chrome 上运行。

http://jsfiddle.net/wuUpL/10/

对不起，如果这不是您的想法，但 Gecko 和 WebKit 在这里的某些事情上没有达成一致！

【讨论】：

啊，我没想过要放另一个跨度来使边界工作正常。谢谢

【解决方案2】：

也许值得注意的是，通常设置不同的父子文本颜色以获得不同颜色的下划线，即使在 Chrome 中也是如此。但是 Chrome 中的 link 装饰继承存在一些奇怪的错误：

u {
  text-decoration: underline;
  color: red;
}
u:hover {
  text-decoration: overline;
  color: green;
}
u * {
  text-decoration: none;
  color: black;
}
u:hover * {
  text-decoration: none;
  color: gold;
}

<p>
  <u>
    Parent with decoration.
    <span>Child (is a <code>span</code>). This works: <code>text-decoraion</code> has differrent (parents) colour, always.</span>
  </u>
</p>
<p>
<p>
  <u>
    Parent with decoration.
    <a href="#">Child (is a <code>link</code>). This does not work <strong>in Chrome</strong>: <code>text-decoration</code> has always childs colour.</a>
  </u>
</p>

奇怪的是，两个最里面的元素在 Chrome 中具有完全相同的计算样式（根据开发工具），所以现在似乎没有什么可修复的了。

将来可以使用单个元素和text-decoration-color CSS 属性。

【讨论】：