一将功成万骨枯,借鉴无数前辈的经验,解决这个问题可以采用此法:
<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将会神秘地消去那“空隙”。
- 根据你的字体大小,需要修改其中里面的一些数据。