Html 混合一个锚'；带内联块元素的s下划线样式

我注意到，如果一个元素，如span或p，有一个inline block的显示，那么它将覆盖锚的下划线样式

<a href="http://www.stackoverflow.com"><span style="display:inline-block">test</span></a>
<a href="http://www.stackoverflow.com"><p style="display:inline-block">test</p></a>

有没有办法防止这种情况发生？

1）将样式移动到a标签

<a href="http://www.stackoverflow.com" style="display:inline-block">test</a>

或

2） 向子元素添加下划线

<a href="http://www.stackoverflow.com"><p style="display:inline-block;text-decoration:underline">test</p></a>

添加以下样式：

​a *:hover { text-decoration: underline }​

---

添加到样式标签

文本装饰：继承
将此作为答案发布。我觉得这是最优雅的解决方案。它在Chrome中完美地工作。然而，在Firefox和IE中，内联块跨度的下划线略高于锚的下划线。请忽略我的最后一条评论。此方法在所有浏览器中都能完美工作。请参阅fiddle以了解一个简单的示例。我的问题是，我还使用了
溢出：隐藏
（实现省略号），这会导致FF/IE中的下划线更高。请参阅fiddle。