Go语言视频零基础入门到精通

一度

<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>


一将功成万骨枯，借鉴无数前辈的经验，解决这个问题可以采用此法：



<form>
    <div>
        <label><input type="checkbox" /> Label text</label>
    </div>
</form>

<style type="text/css">
label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
}
input {
    width: 13px;
    height: 13px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}
</style>


注释：

*overflow是对IE的hack（*-属性hack）。IE6,7都会识别该属性，但Safari，firefox等都会忽略。可能更好的方法是使用条件注释，用这个hack纯粹为了简便
跨浏览器支持的vertical-align语句只有vertical-align: bottom.然后用relative定位上移1~2px的距离便能在Safari，Firefox和IE下得到一致的效果。
对其的困难之处主要在于IE会在<input >周围增加一系列神秘的“空隙”，既不是padding也不是margin，但却像游魂一样一直存在！为<input >设置固定宽度和高度外加overflow: hidden将会神秘地消去那“空隙”。
根据你的字体大小，需要修改其中里面的一些数据。