上标在网络浏览器中不起作用

Question

I'm doing some front end development and the craziest thing is happening. When I use the <sup></sup> tag, it is not functioning. No matter what I try to superscript it only displays correctly when viewed in a live setting in Dreamweaver but not in any browser. What am I missing? Is the tag deprecated?

Answer 1

I had the same issue. It was a CSS conflict. Skylar was close but I'll do you one better.

sup {font-size:xx-small; vertical-align:super;}

;-) ahhhh, works like a charm.

Answer 2

When a widely supported html tag like sup or sub is not working, look for conflicting css.

A great place to start is by searching the Reset statement applied at the top of the css. Sub and Sup are usually part of this reset, which means they've been nutralized in your theme initially to protect you from browser specific defaults. That's a good thing, but...

The problem arises when the theme author fails to redefine specific tags. Here's some css to help define sup and sub so they work again:

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

Answer 3

My guess is you might have reset the default styles on sup.

You can always reapply them:

sup {font-size:xx-small; vertical-align:top;}

Answer 4

sup works in all browsers - check your CSS with Firebug

I suggest you use Firebug and check your CSS defined on the <sup> element. It will give you a much better understanding what's going on.

Answer 5

The tag isn't deprecated and normally works: ^{This is superscript}

It's hard to give a better answer without more information from you.

Answer 6

它必须与CSS规则冲突，因为我已经对其进行单独测试并且可以正常工作。