SUP元素和圆角

Question

我想为sup元素和一些填充添加圆角。

<div>Here is my main text<sup>sup text</sup></div>
<style>
  sup {
    background-color:#f00;
  }
</style>

http://jsfiddle.net/HPzuZ/

sup元素默认为display:inline;。我可以设置display:block;并使用填充和粗糙的角来操作，但我应该修改HTML结构，因为sup现在是阻止的。是否可以在不修改HTML结构的情况下用填充和圆角装饰sup，而只修改CSS。

谢谢。

Answer 1

是的，您可以应用inline-block - http://jsfiddle.net/HPzuZ/1/

sup {
    background-color: #f00;
    display: inline-block;
    border-radius: 3px;
    padding: 0 6px;
}​