IE 中的上标下划线
由于时间有限，我的发言会很简短，所以如果没有我希望的那么详细，我深表歉意。
我有一些代码：
print("<a href='#'>Some text<sup>®</sup> some more text</a>");
在 FF 中，这就像我想要的那样，整个链接带有下划线。 然而在 IE 中，链接除了在 ® 下外都带有下划线，它看起来像连字符上方的符号，看起来相当可笑。
我尝试了在谷歌上找到的几个建议，但没有一个对达到预期效果有很大帮助。 不幸的是，在底部添加边框并不是一个选择。 到目前为止，最好的解决方案是用CSS完全打破sup标签处的下划线，这仍然使它在FF中正常工作，同时在IE中看起来不那么愚蠢。
如果有人可以帮助解决这个问题，我将不胜感激，我不想通过该网站删除 标签，因为我被告知如果我不解决这个问题，我将不得不这样做困境。
更新：使用sup {“text-decoration：none”}解决方案，现在就可以了。 到处都有注册标记，因此整个网站都必须更新，这比我们大家都决定的更麻烦。 感谢那些回复的人。
I'm going to be brief because I'm short on time, so I apologize if this isn't as detailed as I'd like it to be.
I have some code:
print("<a href='#'>Some text<sup>®</sup> some more text</a>");
In FF, this works like I would like, the link as a whole is underlined. However in IE, the link is underlined except under the ® where it looks like a symbol above a hyphen and is rather ridiculous looking.
I've tried several suggestions I found on Google, but none of them are very helpful in achieving the desired effect. Adding a border to the bottom is not an option unfortunately. So far the best solution is to break the underline completely at the sup tag with CSS which still leaves it working fine in FF while still looking less silly in IE.
If anyone could help with this it would be most appreciated, I'd rather not go through the site removing <sup> tags as I've been told I will have to do should I not solve this dilemma.
UPDATE: Went with the sup {"text-decoration:none" } solution, it'll do for now. There are reg marks everywhere, so the whole site would've had to have been updated, which was more trouble than it was worth we all decided. Thanks to those who replied.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（8）
标签不太适合商标和注册符号等内容。我更喜欢用 css 来做：
如果你可以设置一个 .reg 类：
对于：
The
<sup>tag isn't great for things like trademark and reg symbols.I prefer doing it with css:
If you can set up a .reg class:
For:
有时您不允许向链接添加类或用任何元素包装它。 当您需要使用第三方代码时，这种情况并不少见。 顺便说一句，元素也有同样的问题。
在这种情况下，你可以使用类似这样的东西：
在 Chrome 中使用这样的样式（它有与 IE 相同的问题，甚至更难）：
<前>[风格]
一个sup {
文本装饰：无；
显示：内联块； // 没有这个先前的属性将无法工作
底部边框：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]
Sometimes you're not allowed to add class to a link or wrap it with any element. The situation is not so rare when you need to work with third-party code. BTW, same problem with element too.
In this case you can use something like this:
Use such styling for Chrome (it has same problems like IE, even harder):
[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 等”
Eric对它的颜色进行编码
Well it is not an elegant solution, basically use a border instead of an underline. You would have to code the color of it based on "Active, Visted, Etc"
Eric
我让它像这样工作
I made it work like this
埃里克的解决方案是最接近的。 他不需要
display: inline因为元素是内联元素。 他唯一缺少的是line-height，以便您可以在 IE 6 和 IE 7 上看到边框底部。否则，您将看不到该线。Eric's solution is the closest. He doesn't need to have
display: inlinesince<a>elements are inline elements. only thing that he is missing is theline-heightso that you can see the border bottom on IE 6, and IE 7. Otherwise, you won't see the line.好吧，我同意它看起来很糟糕，但这似乎就是 IE 结合下划线和上标的方式。 如果您无法使用边框作弊，我建议您按照 CSS 计划删除
a super的下划线。 有一个名为text-underline-position的仅 IE 属性，但恐怕它没有任何有帮助的值。为了任何还不知道的人的利益，这将是：
Well I agree it looks awful, but it seems to be just the way IE combines underline and superscript. I suggest you go with your CSS plan to remove the underline for
a supif you can't cheat with a border. There's an IE only property calledtext-underline-positionbut it doesn't have any value which helps here either I'm afraid.For the benefit of anyone who doesn't know already that would be:
正如 Diodeus 所说，并且一些研究倾向于同意，我知道 reg 标记无论如何都不会出现在 super 元素中。
因此，假设我们只是解决上划线/下划线问题，而忘记了我们指的是注册标记，我所知道的使它们“看起来”相同的唯一解决方案是使
vertical-align: benchmark或杀死sup 上的text-decoration。As Diodeus says, and a little research tends to agree, I understand that the reg mark wouldn't go in a sup element anyway.
So, assuming that we're only addressing the sup/underline issue and forgetting that we're referring to reg mark, the only solutions I know of to make them 'look' the same are to make
vertical-align: baselineor kill thetext-decorationon the sup.border-bottom 解决方案会将线放置在任何“p”、“q”或“y”下方，而不是穿过字母的底腿。 这比下划线低 2px。
另一种方法是使 职位：亲属
使 位置：绝对； 顶部：-3px； 文本装饰：无；
添加额外的 在之后
The border-bottom solution will place the line under any "p" "q" or "y" instead of through the letters' bottom legs. That is 2px lower than an underline would be.
An alternative is to make the <a> position:relative
make the <sup> position:absolute; top:-3px; text-decoration:none;
add an extra after </sup>