|
比如有一列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走起！ 其实添加背景后，仔细看还是有点灰色的底色，但相比黑色背景好的多了！ |
