img图片在label中不兼容【笔记】

Nov172012

作者：杭州-小白发布：2012-11-17 11:17 分类：CSS 阅读：110,154 次 1条评论

img图片在label中不兼容【笔记】 web前端杭州-小白

哈哈,最近在使用input的时候,发现点击的单选按钮,它旁边不是文字,而是图片的时候,此时不能够点击图片选中那个按钮,如果是文字是可以的.(指的是在IE8以及以下浏览器中)

代码如下

<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属性,就搞定勒。符不符合标准就不扯了。能解决就行.

代码如下：

<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解决方案：(测试过可用)

<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>

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前端,杭州小白的个人博客,小白的个人博客

该日志由杭州-小白于2012年11月17日发表在 CSS 分类下，
原创文章转载请注明: img图片在label中不兼容【笔记】 | web前端,杭州小白的个人博客,小白的个人博客
关键字: CSS, web前端, 杭州小白

【上一篇】javascript AOP的实现【练习】
【下一篇】文字超出自动截取为…【笔记】

您可能还会对这些文章感兴趣！

img图片在label中不兼容【笔记】：目前有1 条留言

沙发
CC:

JS 太好使了! 谢谢哥们儿

2013-04-10 13:50

img图片在label中不兼容【笔记】

您可能还会对这些文章感兴趣！

img图片在label中不兼容【笔记】：目前有1 条留言

天气

大家赞助

最新日志热评日志随机日志

大家赞助

最活跃的读者

最新评论

标签云集

博客统计

用户登录