将锚点的下划线样式与内联块元素混合

Question

我注意到，如果某个元素（如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>

有没有办法阻止这种情况？

Answer 1

1）将样式移动到A-tag

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

Answer 2

添加到样式标记text-decoration:inherit;

Answer 3

添加以下样式：

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

DEMO