Superscript underline in IE

2019-02-18 12:28发布

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>&reg;</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.

8条回答
冷血范
2楼-- · 2019-02-18 12:53

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: baseline or kill the text-decoration on the sup.

查看更多
在下西门庆
3楼-- · 2019-02-18 12:56

Eric's solution is the closest. He doesn't need to have display: inline since <a> elements are inline elements. only thing that he is missing is the line-height so that you can see the border bottom on IE 6, and IE 7. Otherwise, you won't see the line.

<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>
查看更多
登录 后发表回答