覆盖<sup>样式

Question

我想用CSS忽略/覆盖<sup>元素样式，因此它们看起来像普通文本。我不能在我的HTML中展开上标元素。

换言之

的输出

<div>Some <sup>random</sup> text.<div>

看起来应该与

完全相同

<div>Some random text.<div>

我怎么能实现这个目标呢？我应该尝试抵制上标的影响，还是有更聪明的方法？提前谢谢！

Answer 1

sup标签使用font-size和vertical align来创建效果，但您可以将其重置为初始值。

http://jsfiddle.net/p4ohok7a/

sup {
    font-size: initial;
    vertical-align: initial;
}

Answer 2

您可以让sup代码从其父代font-size继承其vertical-align和div。

sup {
  font-size: inherit;
  vertical-align: inherit;
}

<div>Some <sup>random</sup> text.<div>

即使父级已经应用了更多样式，这也会有效。

div {
  font-size: 10px;
}

sup {
  font-size: inherit;
  vertical-align: inherit;
}

<div>Some <sup>random</sup> text.<div>

Answer 3

通过为＆＃39; sup＆＃39;添加以下样式，您可以执行此操作。

sup{
  font-size: initial;
  vertical-align: baseline;
}

以下是此代码的链接。 http://jsbin.com/zuhasoqide/edit?html,css,output

Answer 4

根据Mozilla，sup的默认样式是

vertical-align: super;
font-size: smaller;
line-height: normal;

所以这些是您需要重置的三个属性。