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

Question

我在无法显示部分带有下划线的单词和部分不带下划线的情况下遇到问题。我希望“注册”符号没有下划线。

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

Answer 1

采用display: inline-block

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

为什么这行得通？让我们看看规格

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

Answer 2

除非您将其他文本与 reg 符号分开，否则这将不起作用。

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

h3 span {
text-decoration: underline;
}


h3 span.sup {
text-decoration: none;
vertical-align: super;
font-size: 50%;
font-weight: 400;
}

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

http://jsfiddle.net/rohitazad/yTP9q/2/ <-- 更新感谢 Rohit

Answer 3

看演示：- 演示

h3 span {
vertical-align: super;
text-decoration: none; 
font-size: 50%;
font-weight: 400;
display:inline-block;
}