Question

我会很简短，因为我的时间很短，所以如果不像我希望的那样详细，我会道歉。

我有一些代码：

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

在FF中，这可以像我想的那样工作，整个链接都有下划线。但是在IE中，链接带有下划线，除了在®下，它看起来像连字符上方的符号，看起来很荒谬。

我已经尝试过在Google上找到的一些建议，但它们都没有对实现预期效果有很大帮助。不幸的是，不能选择在底部添加边框。到目前为止，最好的解决方案是使用CSS在sup标签上完全打破下划线，这仍然使它在FF中运行良好，同时在IE中仍然看起来不那么愚蠢。

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

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

Answer 1

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

Answer 2

有时您不允许将类添加到链接或使用任何元素包装它。当您需要使用第三方代码时，情况并不罕见。顺便说一下，元素问题也一样。

在这种情况下，您可以使用以下内容：

保留下划线（适用于Firefox）（一切正常）

为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]

对不起标签中的[] s，我仍然无法理解这个f ***系统如何制作代码示例 - 当我尝试按照自己的意愿进行格式化时，我弄得一团糟。

Answer 3

嗯，这不是一个优雅的解决方案，基本上使用边框而不是下划线。您必须根据“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>

埃里克

Answer 4

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>

Answer 5

我让它像这样工作

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

Answer 6

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

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

a sup{text-decoration:none;}

Answer 7

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

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

Answer 8

边界底部解决方案将线放在任何“p”“q”或“y”下，而不是通过字母的底部腿。这比下划线低2px。

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

添加额外的＆amp; nbsp;在＆lt; / sup＆gt;

之后

上标在IE中强调

8 个答案: