题

由于时间有限，我的发言会很简短，所以如果没有我希望的那么详细，我深表歉意。

我有一些代码：

print("<a href='#'>Some text<sup>&reg;</sup> some more text</a>");

在FF中，这就像我想要的那样，整个链接带有下划线。然而在 IE 中，链接除了在 ® 下外都带有下划线，它看起来像连字符上方的符号，看起来相当可笑。

我尝试了在谷歌上找到的几个建议，但没有一个对达到预期效果有很大帮助。不幸的是，在底部添加边框并不是一个选择。到目前为止，最好的解决方案是用CSS完全打破sup标签处的下划线，这仍然使它在FF中正常工作，同时在IE中看起来不那么愚蠢。

如果有人可以帮助解决这个问题，我将不胜感激，我宁愿不通过该网站删除 <sup> 标签，因为我被告知如果我不解决这个困境，我将不得不这样做。

更新：使用sup {"text-decoration:none" } 解决方案，现在就可以了。到处都有注册标记，因此整个网站都必须更新，这比我们大家都决定的更麻烦。感谢那些回复的人。

有帮助吗？

解决方案

<sup>标签不适用于商标和注册符号等内容。

我更喜欢用css：

<span style='font-size:75%;vertical-align:super;text-decoration:none'>&reg</span>

如果您可以设置.reg类：

.reg {
    font-size:75%;
    vertical-align:super;
    text-decoration:none
}

有关：

<span class='reg'>&reg;</span>

其他提示

有时您不允许向链接添加类或用任何元素包装它。当您需要使用第三方代码时，这种情况并不少见。顺便说一句，元素也有同样的问题。

在这种情况下，你可以使用这样的东西：

  1. Firefox 保留下划线（一切看起来都不错）

  2. 在 Chrome 中使用这样的样式（它有与 IE 相同的问题，甚至更难）：

    [style]
a sup {
    text-decoration: none;
    display: inline-block; // without this previous property will not work
    border-bottom: 1px solid;
    line-height: 1.5em;    // this and following properties are used to shift
    margin-top: -1em;      // an element to make border aligned with underline
                       // can be used relative position or something else.
}
a sub {
    text-decoration: none;
    display: inline-block;
    vertical-align: middle;
    border-bottom: 1px solid;
    line-height: 0.7em;
}
[/style]
[a href="what-aczone-can-do-for-you.aspx"]Text-Jj_Jj[sub]Jj[/sub][sup]Jj[/sup]moreText[/a]
    • 抱歉标签中的 []，我仍然无法理解这个该死的系统是如何制作代码示例的 - 当我尝试按照它想要的方式格式化时，我遇到了混乱。

嗯，这不是一个优雅的解决方案，基本上使用边框而不是下划线。您必须根据<！>“Active，Visted，Etc <！>”来编码它的颜色; 

<style type="text/css">
   a.u {
       text-decoration: none; 
       border-bottom: 1px solid black;
       display: inline;
   }
</style>

<a href="#123" class="u">CHEESE<sup>&reg;</sup></a>

埃里克

我让它像这样工作

print(< a href='#' class="underline">Some text< sup >&reg;< /sup > some more text< /a >)  
.underline {text-decoration:none; border-bottom:1px solid #FFF;}

Eric的解决方案是最接近的。他不需要display: inline，因为<a>元素是内联元素。他唯一缺少的是line-height，以便你可以在IE 6和IE 7上看到边框底部。否则，你将看不到该行。

<style type="text/css">
   a.u {
       text-decoration: none; 
       border-bottom: 1px solid black;
       line-height: 1.5em;
   }
</style>

<a href="#123" class="u">CHEESE<sup>&reg;</sup></a>

嗯，我同意它看起来很糟糕，但它似乎只是IE结合下划线和上标的方式。如果您不能使用边框作弊，我建议您使用CSS计划删除a sup的下划线。有一个IE浏览器只有一个名为text-underline-position的属性，但是它没有任何值，这对我有所帮助。

为了任何不了解的人的利益：

a sup{text-decoration:none;}

正如Diodeus所说，并且一些研究倾向于同意，我理解reg标记无论如何都不会出现在sup元素中。

所以，假设我们只是解决支持/下划线问题而忘记我们指的是reg标记，我所知道的唯一使它们“看起来”相同的解决方案是使vertical-align: baseline或杀死text-decoration on the sup。

border-bottom解决方案将该行放在任何<！>“p <！>”下; <！> QUOT; <！> q QUOT;或<！>“; y <！>而不是通过字母的底部腿。这比下划线低2px。

另一种方法是制作<！> lt; a <！> gt;位置：相对结果 制作<！> lt; sup <！> gt;位置：绝对的;顶部：-3px;文字修饰：无;

添加额外的<！>放大器; nbsp;在<！> lt; / sup <！> gt;

之后
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top