4

我会简短一些，因为我的时间不多，所以如果这不是我希望的那么详细，我深表歉意。

我有一些代码：

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

在 FF 中，这就像我想要的那样工作，整个链接都带有下划线。但是在 IE 中，除了 ® 下的链接看起来像连字符上方的符号并且看起来相当荒谬之外，该链接都带有下划线。

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

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

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

4

8 回答 8

6

该<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>
于 2009-01-07T15:49:07.620 回答
4

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

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

  1. 为 Firefox 保留下划线（一切正常）

  2. 为 Chrome 使用这样的样式（它和 IE 有同样的问题，甚至更难）：

    [风格]
晚安{
    文字装饰：无；
    显示：内联块；// 没有这个先前的属性将不起作用
    边框底部：1px 实心；
    行高：1.5em；// 这个和下面的属性用于移位
    边距顶部：-1em；// 使边框与下划线对齐的元素
                       // 可以使用相对位置或其他。
}
一个子{
    文字装饰：无；
    显示：内联块；
    垂直对齐：中间；
    边框底部：1px 实心；
    行高：0.7em；
}
[/风格]
[a href="what-aczone-can-do-for-you.aspx"]Text-Jj_Jj[sub]Jj[/sub][sup]Jj[/sup]moreText[/a]
    • 对不起标签中的 []s，我仍然无法理解这个 f*** 系统是如何制作代码示例的 - 当我尝试按照它想要的格式进行格式化时，我变得一团糟。
于 2013-06-04T12:15:01.273 回答
3

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

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

埃里克

于 2009-01-07T17:24:17.570 回答
1

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>
于 2010-10-27T02:27:37.057 回答
1

我让它像这样工作 

print(< a href='#' class="underline">Some text< sup >&reg;< /sup > some more text< /a >)  
.underline {text-decoration:none; border-bottom:1px solid #FFF;}
于 2011-04-27T09:48:20.440 回答
0

好吧，我同意它看起来很糟糕，但这似乎只是 IE 结合下划线和上标的方式。a sup如果你不能用边框作弊，我建议你按照你的 CSS 计划删除下划线。有一个名为 IE 的唯一属性，text-underline-position但恐怕它在这里没有任何帮助。

为了任何不知道的人的利益，这将是：

a sup{text-decoration:none;}
于 2009-01-07T15:50:33.657 回答
0

正如 Diodeus 所说，一些研究倾向于同意，我知道 reg 标记无论如何都不会进入 sup 元素。

因此，假设我们只解决 sup/underline 问题而忘记了我们指的是 reg 标记，我所知道的使它们“看起来”相同的唯一解决方案是制作vertical-align: baseline或杀死text-decorationsup。

于 2009-01-07T17:07:03.627 回答
-1

border-bottom 解决方案将把线放在任何“p”、“q”或“y”下面，而不是穿过字母的底腿。这比下划线低 2px。

另一种方法是使 <a> 位置：相对
使 <sup> 位置：绝对；顶部：-3px；文字装饰：无；

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

于 2013-06-03T21:42:15.397 回答