前端开发 | 在线支持

【示例】

【效果图比较】

友情提示：不同浏览器在解析时并不同统一，针对上面示例代码，不同浏览器解析效果比较如下图。浏览IE标准下载IE标准示例

IE效果图：

Firefox效果图：

Chrome效果图：

HTML

<p>valign:
<span class="baseline"><img src="images/box.gif" title="baseline" /><sup>baseline</sup></span>
<span class="sub"><img src="images/box.gif" title="sub" /><sub>sub</sub></span>
<span class="super"><img src="images/box.gif" title="super" /><sup>super</sup></span>
<span class="top"><img src="images/box.gif" title="top" /><sub>top</sub></span>
<span class="text-top"><img src="images/box.gif" title="text-top" /><sup>text-top</sup></span>
<span class="middle"><img src="images/box.gif" title="middle" /><sub>middle</sub></span>
<span class="bottom"><img src="images/box.gif" title="bottom" /><sup>bottom</sup></span>
<span class="text-bottom"><img src="images/box.gif" title="text-bottom" /><sub>text-bottom</sub></span>
</p>

CSS

body {font-size:48px;}
p{
    padding:0;
    background-image:url(images/dot.jpg), url(images/dot.jpg), url(images/dot.jpg), url(images/dot.jpg),  url(images/dot.jpg);
    background-repeat:repeat-x, repeat-x, repeat-x, repeat-x, repeat-x;
    background-position:left 29px, left 41px, left 52px, left 67px, left 80px;
}
.baseline {vertical-align:baseline;}
.sub {vertical-align:sub;}
.super {vertical-align:super;}
.top {vertical-align:top;}
.text-top {vertical-align:text-top;}
.middle {vertical-align:middle;}
.bottom {vertical-align:bottom;}
p>span {position:relative;}
sub,sup {
    position:absolute;
    font-size:15px;
    color:green;
    width:60px;
    text-align:center;
}
sup {
    top:-26px;
    left:-22px;
}
sub {
    top:62px;
    left:-18px;
}

下载源代码