尝试更改< span>的显示内联块如下：
span {
background-color: red;
border-radius: 999px;
color: white;
margin-left: 2px;
position: relative;
top: -.5em;
font-size: .75em;
font-weight: bold;
padding: 0 .3em;
display: inline-block; /*
}
说明
根据@L_301_2@,文本修饰不会传播到嵌套的原子内联级元素的内容 – 例如内联块和内联表.
07002
[…] Note that text decorations are not propagated to floating and
absolutely positioned descendants,nor to the contents of atomic
inline-level descendants such as inline blocks and inline tables.
该规范还指出(我的重点)：
Underlines,overlines,and line-throughs are applied only to text
(including white space,letter spacing,and word spacing): margins,
borders,and padding are skipped. User agents must not render these
text decorations on content that is not text. For example,images and
inline blocks must not be underlined.
还要注意文本装饰会坚持文本本身,因此：
Relatively positioning a descendant moves all text decorations affecting it along with the descendant’s text; it does not affect calculation of the decoration’s initial position on that line.
125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
