如何使注册的符号不显示下划线？

我遇到了问题，无法显示带有下划线的单词的一部分和没有下划线的单词的一部分。我希望“已注册”符号没有下划线。

HTML:

<h3>Basecamp<span class="sup">&reg;</span></h3>

CSS:

h3 {
font-size: 21px;
color: #369;
font-weight: bold;
text-decoration: underline;
margin-top: 5px;
padding: 5px;
}

.sup {
vertical-align: super;
text-decoration: none; /*how do i get this off?!*/
font-size: 50%;
font-weight: 400;
}

Use display: inline-block

http://jsfiddle.net/WYwv2/3/ http://jsfiddle.net/WYwv2/3/

为什么这有效？我们来看看规格 http://www.w3.org/TR/CSS21/text.html#lining-striking-props

...对于建立内联格式化上下文的块容器，装饰将传播到包装块容器的所有流入内联级子级的匿名内联元素。对于所有其他元素，它会传播到任何流入的子元素。注意文本装饰不会传播到浮动和绝对定位的后代，也不是原子内联级后代的内容，例如内联块和内联表。