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

Question

我注意到，如果一个元素，如span或p，有一个内联块的显示，那么当它放在里面时，它将覆盖锚点的下划线样式。

<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

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

Answer 2

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>

Answer 3

添加以下样式：

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

演示