如何让注册符号不显示下划线？ [英] How do I make the registered symbol not display an underline?

问题描述

如果我不能在下划线中显示部分字词，并且无法显示部分字词，则会遇到问题。我希望注册符号没有下划线。

HTML：

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

CSS：

  h3 {
 font-size：21px; 
颜色：＃369; 
 font-weight：bold; 
 text-decoration：下划线; 
 margin-top：5px; 
 padding：5px; 
} 
 
 .sup {
 vertical-align：super; 
 text-decoration：none; / *我如何得到这个？* / 
 font-size：50％; 
 font-weight：400; 
 
  

解决方案使用 display：inline-block

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

为什么这个工作？我们来看看规格

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

I am having trouble where I can't display part of a word with an underline and part of it without. I want the "registered" symbol to not have an underline.

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/

Why does this work? Let's have a look at 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.

这篇关于如何让注册符号不显示下划线？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！