IE下label中图片不能点击对应input

今天想用点击图片选中radio按钮,但是在IE浏览器测试时发现bug,点击图片时radio按钮不能选中,但鼠标经过时radio有反应点击图片就是不能选中状态,想了好久终于得到解决方法

代码如下 复制代码

HTML 代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>IE下label中img无法点击对应input的解决方法</title>
<style type="text/css">
*{margin:0;padding:0;}
body{font:12px/1.5 Arial;}
label{cursor:pointer;}
li{
position:relative;
display: inline-block;
width:130px;
margin-right:27px;
text-align:center;
*display: inline;
zoom:1;
vertical-align:top;
}
li img{
display:block;
padding:5px;
background-color:#E9E5E0;
}
li s{
position:absolute;
display:block;
width:120px;
height:120px;
padding:5px;
top:0;
left:0;
filter:alpha(opacity=0);
background-color:#fff;
}
</style>
</head>
<body>
<ol>
<li><label for="special01"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special01" /></li>
<li><label for="special02"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special02" /></li>
<li><label for="special03"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special03" /></li>
<li><label for="special04"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special04" /></li>
<li><label for="special05"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special05" /></li>
<li><label for="special06"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special06" /></li>
<li><label for="special07"><img src="/edwardshaw/images/trends/index03.jpg" width="120" height="120" alt="" /><s></s></label><input type="radio" name="special" id="special07" /></li>
</ol>
</body>
</html>

分类:默认分类 时间:2013-08-17 人气:2
本文关键词:
分享到:

相关文章

  • php解决input输入多个空格只显示一个的问题 2015-01-26

    这里简单的介绍了关于php解决input输入多个空格只显示一个的问题,我们利用了chr(32)来替换成html空格符,有需要的朋友可以参考一下。 代码如下 复制代码 <body> <form id="form1" name="form1" method="post" action=""> <label for="textfield"></label> <input type="text" name="txt" id="txt" />

  • 确保php应用程序的安全-不能违反的四条安全规则 2012-01-01

    规则 1:绝不要信任外部数据或输入 关于 Web 应用程序安全性,必须认识到的第一件事是不应该信任外部数据。外部数据(outside data) 包括不是由程序员在 PHP 代码中直接输入的任何数据。在采取措施确保安全之前,来自任何其他来源(比如 GET 变量、表单 POST、数据库、配置文件、会话变量或 cookie)的任何数据都是不可信任的。 例如,下面的数据元素可以被认为是安全的,因为它们是在 PHP 中设置的。 清单 1. 安全无暇的代码 <?php $myUsername = t

  • ASP.NET MVC中前台页面提交数据到后台控制器 2012-02-10

    本文章就是介绍ASP.NET MVC中从前台页面视图(View)传递数据到后台控制器(Controller)方式了,下面我们一起来学习整个过程。 方式一: 数据存储模型Model:此方式未用到数据存储模型Model,仅简单的字符串string型数据传递 前台接收显示数据视图View: 代码如下 复制代码 <div style="height:300px; width:100%"> <div style="margin-left:100px;margin-top:50px;"

  • js验证电话号码与手机支持+86的正则表达式 2012-04-12

    本篇文章主要介绍了js验证电话号码与手机支持+86的正则表达式。需要的朋友可以过来参考下,希望对大家有所帮助 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • 最新jQuery Mobile 1.2版本新特性 2012-04-13

    Widgets jQuery Mobile最核心的地方就在于widgets。提供了与用户交互的界面。在最新的版本中,加入了一个全新的widget:popup modal。 Popups (弹出层) 弹出层是一个覆盖于页面其它内容的小的区域。可以用来设计提示栏,显示照片,地图或者其它内容。在jQuery mobile 1.2中,实现了这个超棒的widgets。 在本篇文章中,我们将使用如下代码框架来演示代码: <!DOCTYPE html> <html> <head

  • Jquery选择子控件"大于号"和" "区别介绍及使用示例 2012-06-08

    parent > child 概述 在给定的父元素下匹配所有的子元素 参数 parentSelector任何有效选择器 childSelector用以匹配元素的选择器,并且它是第一个选择器的子元素 示例 描述: 匹配表单中所有的子级input元素。 HTML 代码: 复制代码 代码如下: <form> <label>Name:</label> <input name="name" /> <fieldset> <label

  • 浅析jQuery中常用的元素查找方法总结 2012-06-29

    本篇文章是对jQuery中常用的元素查找方法进行了详细的总结和介绍,需要的朋友参考下 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素,可以运用多种的选择方式进行联合选择:例如$("#myELement,div,.mycl

  • 解决IE7 绝对定位z-index办法 2012-07-11

    文章分享几个关于解决IE7 绝对定位z-index解决办法,有二个是国外网站的我也译有需要的只要使用代码就行了 In IE7 browser, I just meet one issue about position. I made a demo page to test the position conditions of relative and absolute. There are the related codes below: [CSS] 代码如下 复制代码 .rela{ width

  • dwz+jquery+fileupload+springmvc实现文件上传及图片预览 2012-08-11

    1 前台jsp:文件的上传利用了iframe实现局部刷新功能。使用了apache的fileupload组件,用到的jar: commons-fileupload.jar,commons-io.jar DiskFileItemFactory fac = new DiskFileItemFactory(); ServletFileUpload upload = new ServletFileUpload(fac); upload.setHeaderEncoding("utf-8"); Html代码

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.048 (s). 10 q(s)