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

标签 html css

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

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

最佳答案

使用display: inline-block

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

为什么这有效?我们来看看the specs

... For block containers that establish an inline formatting context, the decorations are propagated to an anonymous inline element that wraps all the in-flow inline-level children of the block container. For all other elements it is propagated to any in-flow children. Note that text decorations are not propagated to floating and absolutely positioned descendants, nor to the contents of atomic inline-level descendants such as inline blocks and inline tables.

关于html - 如何使注册的符号不显示下划线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13618639/

相关文章:

javascript - 在 tumblr 博客上隐藏主页提要

javascript - Laravel 不导入/读取公共(public)源文件 (css/js)

css - BEM CSS block 或修饰符

php - 向下滚动时切换 Logo

javascript - 粘性页脚帮助!

html - 如何使背景图像响应?

html - 如何更改锥形小时的颜色?

javascript - JS 根据 Dropdown 用户输入显示内容

html - 将居中文本添加到水平线的中间

html - 仅CSS的砌体布局