label>i+input结构，再给label绑定点击事件，会导致点击时执行2次点击事件的怪异现象，这会影响到程序猿对页面的内容获取，下面就来讲下如何在能美化input的前提下，又不会造成不良影响的处理方法，相关解析如下。 美化<input type="radio"/>标签时，使用结构：label>i+input， input标签不管是不是隐藏，给label加点击事件，chrome/firefox/ie9及以上版本会出现点击事件执行2次的问题，而ie8、7在input标签隐藏的状态下，点击事件只执行一次。（注意：label>input这样的结构，点击时默认会使input变成checked状态，但label内还有其它元素,则ie7下input必须是lable的第1个元素，才能响应上述默认事件！） 在点击事件中加入event.target.nodeName 会发现：chrome点击对象会是点击区域对应的元素(input和 i)+隐藏的input标签，而ie8及以下是input 或 i 测试发现，不隐藏input标签时，点击input标签本身区域，所有浏览器点击事件都则只执行一次。 至此上述结构，点击事件执行2次的问题的解决方法一就出来了。 方法一 解决思路：让input覆盖在label标签上,使点中对象只能是input标签，对应的css 写法： label{position: relative;*zoom: 1;*overflow: hidden;} input{position: absolute;left: 0;top: 0;display: inline;width: 100%;height: 100%;cursor: pointer;outline: none;background-color: #f00;opacity: 0;filter: alpha(opacity=0);}*} 看到上述css规则中，带*的规则是为了解决input绝对定位后，在ie7会莫名消失以及显示区域大小不正常的问题。方法一使用了定位的方法，可能会影响页面元素层级关系，产生页面显示异常问题！ 另外ie9下，点击label文字部分还是会点击到label对象，应该加方法二提供的对应js,以实现label点击事件中点击对象过滤！ 方法二 解决思路：在label点击事件中加点击对象过滤（前提是input标签没被隐藏，这样才能保证ie8/7也能响应input点击事件，并且input是label的第1个子元素，以保证“label>input这样的结构，点击时默认会使input变成checked状态”） 对应css规则： label{cursor: pointer;background-color: #f00;} label input{margin-right: -13px;*width:13px;*height: 13px;opacity: 0;filter: alpha(opacity=0);} input标签的css规则，是为了保证不隐藏input的情况下，又能使input不占位，并且在页面上透明显示，从而保证ie7/8也能像chrome一样能正常响应input的点击事件！ie7下默认的input宽高是20px,标准浏览器是13px,因要兼容处理，margin-right才能统一写-13px 对应js: $("label").click(function(e){ if(!e.target.is("input")) return; 其它代码.... } 方法三 解决思路：label>input 结构下，避免在label下加点击事件，而是将点击事件直接加到input中（input标签不处于隐藏状态，ie8/7才会触发input点击事件），再加入方法二的css规则即可，推荐此方法。