聘我网

新概念招聘3.0

如何实现cross-browser的<input type="checkbox">和<label>的对齐?

vote up0vote downstar

这是一直困扰我的css问题之一。

我的代码如下:

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

期待能有好的解决方法!

 

1 个答复

vote up0vote downcheck

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

<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>

注释:

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

您的回答





不是您要找的问题? 浏览其他含有标签 的问题或者 自己问个.