返回首页
当前位置: 主页 > Windows教程 >

IE下checkbox黑框样式问题及解决方法

时间:2013-12-23 01:45来源:Office教程学习网 www.office68.com编辑:麦田守望者

比如有一列checkbox,你在checkbox里勾选取消都很正常,如:

<div><span>第一个</span><input type="checkbox" /></div>
<div><span>第二个</span><input type="checkbox" /></div>
<div><span>第三个</span><input type="checkbox" /></div>
<div><span>第四个</span><input type="checkbox" /></div>
<div><span>第五个</span><input type="checkbox" /></div>
<div><span>第六个</span><input type="checkbox" /></div>
<div><span>第七个</span><input type="checkbox" /></div>

DEMO走起!

其实上面的例子就是正常的checkbox,勾选或取消没什么不一样,但我要是加入以下JavaScript代码让它自动排位就有点问题了:

JS Code:

window.onload = function(){
	var inputs = document.body.getElementsByTagName("input");
	for(var i=0; i<inputs.length; i++){
		inputs[i].onclick = (function(index){
			return function(){
				if(this.checked){
					document.body.insertBefore(
						this.parentElement,
						inputs[0].parentElement
					);
				}else{
					document.body.appendChild(this.parentElement);
				}	
			};
		})(i);
	}
};

然后你在勾选或取消时,checkbox居然变样式了:

DEMO走起!

这个原因的引起估计是IE对checkbox默认有鼠标事件样式,如果你仔细分析,你会发现默认在IE中的checkbox在鼠标左键压下时checkbox背景全黑,当松开鼠标左键后checkbox的黑色背景消失。引起图中样式的问题可能是在鼠标压下时checkbox背景发生了变化,接着移位,最后鼠标松开后由于checkbox发生了移位所以不能恢复checkbox鼠标压下时的黑色背景导致。

为了解决这个问题我们可以给checkbox添加样式阻止浏览器默认样式

input { background: #FFF; } 

DEMO走起! 其实添加背景后,仔细看还是有点灰色的底色,但相比黑色背景好的多了!

------分隔线----------------------------
标签(Tag):windows7 windows8 操作系统 windows教程 windows技巧 windowsxp
------分隔线----------------------------
推荐内容
猜你感兴趣