vertical-align 测试

by zicai

HTML

<select id="lineselector">
    <option value="baseline">baseline</option>
    <option value="sub">sub</option>
    <option value="super">super</option>
    <option value="top">top</option>
    <option value="text-top">text-top</option>
    <option value="middle">middle</option>
    <option value="bottom">bottom</option>
    <option value="text-bottom">text-bottom</option>
</select>

<div id="wrapper">
    <div id="line-wrapper">
        <div id="line">&nbsp;</div>
    </div>
    great it works!<sup>2</sup>囧啊
</div>

CSS

#wrapper {
    font-size:40px;
}
#line-wrapper {
    position: relative;
    width: 0;
    height: 0;
    display: inline-block;
    overflow: visible;
}
#line {
    position: absolute;
    height: 1px;
    width: 99999px;
    background: red;
    overflow: hidden;
}

JavaScript

document.querySelector("#lineselector").onchange = function () {
    document.querySelector("#line-wrapper").style.verticalAlign = this.value;
}