css - IE 中下划线粗细不一致

Question

我希望我的锚链接的内容始终是粗体和下划线，但锚标签内的跨度不应该是粗体。

示例标记：

<a>Hello, <span>fooooo</span> bar</a>

款式：

    a {
        font-weight: bold;
        text-decoration: underline;
    }

    span {
        font-weight: normal;
    }

（右键单击图像并选择查看/在新选项卡中打开以获得更好的视图）

在 IE8+ 中，下划线粗细不一致：显然它是由链接内粗体文本的百分比决定的。有没有办法让页面上每个链接的下划线看起来完全相同？

小提琴：http: //jsfiddle.net/FfBGn/

Answer 1

Kinda hack-ish，但text-decoration:underline你可以使用它来代替 ，而不是：

border-bottom:1px solid #000;

演示

---

或者，如果您必须使用text-decoration:underline，您可以将粗体加粗。

font-weight:800;

演示

Answer 2

也许更简单的方法是设置锚的边框而不是下划线？这样你可以自己决定厚度吗？

border-bottom: 1px solid #000000;