代码之家 › 专栏 › 技术社区 › Blair Scott

IE中的上标下划线

superscript underline internet-explorer css html

Blair Scott · 技术社区 · 17 年前

我有一些代码:

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

在FF中,这就像我所希望的一样,链接作为一个整体加了下划线。然而,在IE中,链接是加下划线的,除了在下面,它看起来像一个连字符上面的符号,看起来很可笑。

如果有人能帮上忙的话,我将不胜感激,我不想浏览这个网站 <sup>

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

8 回复 | 直到 17 年前

Diodeus - James MacFarlane 17 年前

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

Inquisitor 13 年前

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

保持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]

epascarello 17 年前

这不是一个优雅的解决方案,基本上使用边框而不是下划线。您必须根据“活动、访问等”对其颜色进行编码

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

埃里克

Andrie 15 年前

我让它像这样工作

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

Herman Schaaf 15 年前

display: inline 自从 <a> 元素是内联元素。他唯一缺少的就是那张照片 line-height 这样你就可以在IE6和IE7上看到边框底部。否则,您将看不到线。

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

annakata 17 年前

a sup text-underline-position 但恐怕它在这里也没有任何帮助。

为了那些还不知道的人的利益:

a sup{text-decoration:none;}

Tim Cooper 14 年前

因此,假设我们只解决了sup/underline问题,而忘记了我们指的是reg-mark,那么我所知道的使它们“看起来”相同的唯一解决方案就是 vertical-align: baseline 或者杀了那个人 text-decoration 有空吗。

-1

Jose G 13 年前

边框底部解决方案将线条放置在任何“p”、“q”或“y”下,而不是穿过字母的底脚。这比下划线低2倍。

另一种方法是将<a>职位:相对

增加一个额外的 之后</sup>