Question

我的HTML页面处于一种奇怪的模式，其中sup和sub标签不会提升或降低线条上方的角色，尽管它们确实会减小角色的大小。我已经放了一个简单的

<body>      
<p class="sample" style="margin-left:10px;">X<sup>2</sup> T<sub>3</sub></p>

位于我的页面顶部，我打印的内容是：

enter image description here

我尝试了各种字体和大小并重新加载页面，但我还没有发现任何修复它的内容。如果我在jsfiddle中放入相同的代码，它可以正常工作：

enter image description here

有谁知道可能会发生什么？

感谢。

Answer 1

我遇到了同样的问题，这是由于reset.css引起的。

要解决此问题，请实现以下CSS（在此处找到：https://gist.github.com/unruthless/413930）：

sub, sup {
  /* Specified in % so that the sup/sup is the right size relative to the surrounding text */
  font-size: 75%;

  /* Zero out the line-height so that it doesn't interfere with the positioning that follows */
  line-height: 0;

  /* Where the magic happens: makes all browsers position the sup/sup properly, relative to the surrounding text */
  position: relative;

  /* Note that if you're using Eric Meyer's reset.css, this is already set and you can remove this rule */
  vertical-align: baseline;
}

sup {
  /* Move the superscripted text up */
  top: -0.5em;
}

sub {
  /* Move the subscripted text down, but only half as far down as the superscript moved up */
  bottom: -0.25em;
}

Answer 2

我使用了以下css：

font-size:70%;
vertical-align:super;

My Stack Overflow Answer<sup style="font-size: 70%;vertical-align: super;">©</sup>

Answer 3

我遇到了完全相同的问题，但没有任何效果。

只是一些 CSS 分配导致了这个错误。我已经分配：

sub,
sup{
  position: static;
  top: none;
  left: none;
}

确保未分配此 CSS。

HTML <sup>和<sub>无法正常工作</sub> </sup>

3 个答案: