Nov172012
img图片在label中不兼容【笔记】
img图片在label中不兼容【笔记】 web前端 杭州-小白
哈哈,最近在使用input的时候,发现点击的单选按钮,它旁边不是文字,而是图片的时候,此时不能够点击图片选中那个按钮,如果是文字是可以的.(指的是在IE8以及以下浏览器中)
代码如下
1 2 3 4 5 |
<input type="radio" id="radio1" name="testRadio" /> <label for="radio1"><img src="1.jpg" height="100" /></label> <input type="radio" id="radio2" name="testRadio" /> <label for="radio2"><img src="1.jpg" height="100" /></label> |
此代码在IE8以及以下浏览器出现不兼容的现象。
经过搜索发现有几种方案,大概是这样子的html,css,js 三种 .其中CSS的是使用定位,在label里面套一个空标签,控制大小和图片一样,其实就是控制那个标签的层级做文章而已 ,这种方案比较麻烦撒。。亲们肯定不喜欢这么麻烦滴玩意吧,那么下面,还有一种更简单的。HTML方式 就是在图片上面加一个disabled属性,就搞定勒。符不符合标准就不扯了。能解决就行.
代码如下:
1 2 3 4 5 |
<input type="radio" id="radio3" name="testRadio" /> <label for="radio3"><img src="1.jpg" height="100" disabled="" /></label> <input type="radio" id="radio4" name="testRadio" /> <label for="radio4"><img src="1.jpg" height="100" disabled="" /></label> |
看看就多了一个disabled. 在IE浏览器都正常勒,信不信那就自己测试吧。。哇咔咔。。这样也可以,太有趣勒。。
在附带一个网上给出的JS解决方案:(测试过可用)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<script type="text/javascript"> window.onload = function() { if(document.all && navigator.appVersion.indexOf("MSIE") > -1 && navigator.appVersion.indexOf("Windows") > -1) { var a = document.getElementsByTagName("label"); for(var i = 0, j = a.length; i < j; i++) { if(a[i].hasChildNodes && a[i].childNodes.item(0).tagName == "IMG") { a[i].childNodes.item(0).forid = a[i].htmlFor; a[i].childNodes.item(0).onclick = function() { var e = document.getElementById(this.forid); switch(e.type) { case "radio": e.checked |= 1; break; case "checkbox": e.checked = !e.checked; break; case "text": case "password": case "textarea": e.focus(); break; } } } } } } </script> |
此js的来源: http://snook.ca/archives/javascript/using_images_as
本文固定链接: http://www.xiaobai8.com/Blog/665.html | web前端,杭州小白的个人博客,小白的个人博客
JS 太好使了! 谢谢哥们儿
2013-04-10 13:50