在浏览器中解析"赋予margin属性"的checkbox空白边距(IE6和FF)

积极的人在每一次忧患中都看到一个机会,而消极的人则在每个机会都看到某种忧患。
测试条件:
1.不管出于什么目的,在公共样式中定义了input元素的margin属性,input { margin:0; }
2.在IE6中测试
测试代码:
复制代码
代码如下:

<html>
<style>
input { margin: 0; }
</style>
<body>
<div style="border: 1px solid #ccc;">
<input type="checkbox" />选择
</div>
</body>
</html>

解析图示:

在IE6中checkbox距离左边框有4像素的间隔,而在FF中则没有。

解决方法:

1.设置checkbox的width属性,值差不多是14px,仍然会有一些细微的差别,可以忽略了。

如果width超过14px,IE6和FF中都表现为checkbox和左边框有空白间隔,checkbox的大小没有改变。

2.如果同时设置了checkbox的width和height属性,IE6和FF中checkbox的大小会根据所设置的值缩放。

本文在浏览器中解析"赋予margin属性"的checkbox空白边距(IE6和FF)到此结束。一个人有没有钱不一定穷,但没有梦想那就穷定了。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
如何解决chrome浏览器中input背景透明问题

CSS中height和width在IE和其他浏览器中的区别图文详解

让你的HTML5&CSS3网站在微软的浏览器中也能运行

css relative相对定位的top值在不同浏览器中如何使用javascript获取的差异

css在不同浏览器中的唯一标识以height属性为例