关于复选框的一小点发现

最新推荐文章于 2023-09-19 23:07:39 发布

lanapple123

最新推荐文章于 2023-09-19 23:07:39 发布

阅读量112

点赞数

文章标签： Chrome 浏览器 CSS HTML

本文链接：https://blog.csdn.net/lanapple123/article/details/83742562

版权

设定css的checkbox：

1、<input type="checkbox" id="remember_me" name="remember_me"/>测试
ie6、ie7下效果：

ff、chrome下效果：

ie8下效果：

大家看出差异了吧（垂直方向的对齐是另一个问题了，这里不多介绍了），照理说应该像ie8下面那样文字贴紧才对哈。噢...那么给复选框的内外补丁重置一下会怎么样呢

input{margin:0;padding:0;}

这下，ff、chrome、ie8成三胞胎了：

然后...ie6、ie7下继续坚挺：

看来不是这个问题了...辣么，是ie6，ie7对checkbox有一个默认的顽固的范围？
好吧，加个背景颜色

input{margin:0;padding:0;background-color:#222;}

果然，ie6和ie7下看出一点眉目了：

ff、chrome、ie8下效果（背景色没有了?别急，继续往下看）：

辣么，我又尝试了一下设置它的宽高：

input{margin:0;padding:0;width:12px;height:12px;background-color:#222;}

http://huodong.duomi.com/music_303029713_Listen.html

偶也，这下ie6、ie7下的背景也不见了：

那么，换一个大点的值呢：

input{margin:0;padding:0;width:18px;height:18px;background-color:#222;}

ff、chrome、ie8下效果：

ie6、ie7下效果：

是不是很无语呀，ie6、ie7这两兄弟总是不那么听话
好像问题的根源是这样的，在ff、chrome、ie8等等浏览器下，checkbox的宽高就是这个小框框的宽高（本来也该是这样...囧）,所以也看不到背景颜色。而在ie6、ie7下面，却总是要给这个框穿上一件“外套”，所以表现出来的就是框和文字之间始终有一点间距，而且框的大小也匪夷所思（也不是匪夷所思，有规律的，只不过我表达能力有限，不好说清楚-.-）...
那么，遇到这种情况该怎么办呢？
经过测试，发现当checkbox的宽和高<=13px的时候，各浏览器下都是没有间距的。我是这么认为的，ie6、ie7下面checkbox默认的宽高就是13px，所以当checkbox的宽和高<=13px，背景色就被“遮住了”，13px算是一个“临界点”。