a标签中的label在IE下触发不了a标签的href链接(label标签——解析)
<a href="http://www.baidu.com/" target="_blank">
<span>百度</span> <!--IE or FF/chrome下鼠标放上去是手形状-->
<label>baidu</label> <!--FF/chrome 下鼠标放上去是手形状; IE 下鼠标放上去是箭头形状-->
</a>
可以分别在ie,FF,chrome试试,肯定是会有不同的。
当你点击"label"时,在ie下肯定是链接不了的。想知道原因吗。其实这就要追溯到它的本质。
来看一下label标签的定义和用法:(参见:http://www.w3school.com.cn/tags/tag_label.asp)
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
故而IE完全按照定义来表现的,着实是要求非常规范。
然而为此引出的话题就是,你理解了label吗?
来再看一段代码:
<table>
<tr>
<td><label for="username">用户名:</label></td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td><label for="password">密码:</label></td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td><label for="repassword">密码确认:</label></td>
<td><input type="password" name="repassword" id="repassword"></td>
</tr>
<tr>
<td><label for="_basketball">爱好:</label></td>
<td>
<label><input type="checkbox" value="basketball" name="hobby" id="_basketball">basketball</label>
<label><input type="checkbox" value="football" name="hobby" id="_football">football</label>
<label><input type="checkbox" value="skating" name="hobby" id="_skating">skating</label>
<label><input type="checkbox" value="dance" name="hobby" id="_dance">dance</label>
</td>
</tr>
<tr>
<td><label for="_boy">性别:</label></td>
<td>
<label><input type="radio" value="boy" name="sex" id="_boy">boy</label>
<label><input type="radio" value="girl" name="sex">girl</label>
</td>
</tr>
<tr>
<td><label for="email">邮箱:<label></td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td><label for="address">住址:</label></td>
<td><input type="text" name="address" id="address"></td>
</tr>
</table>
我们可以清楚地看到label的for标签的value = 跟它相关的表单控件的id的value 。(也就解释了这句话“label标签为 input 元素定义标注(标记)”)
还有就是,当你点击“用户名”的文本时,光标自动移到用户名对应的表单控件里。(也就是解释了当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上)。
反之,当你去掉label的for标签时,就真的只是呈现文本的作用。
这样就进一步,印证了为什么label在ie下使得a标签链接失效,因为label标签本身不就是这么用的。
a标签中的label在IE下触发不了a标签的href链接(label标签——解析)的更多相关文章
- a 标签中加 onclick事件,根据事件中的校验情况来决定是否执行a标签的链接
a 标签中加 onclick方法后,先执行onclick方法,在去执行a标签href下属性对应的动作,如果不想执行href属性下动作需要用false作为返回值. <a href="ht ...
- a标签中的javascript:;是什么
a标签中的javascript:;是什么 一.问题 <a>标签中href="javascript:;"表示什么意思?? <a id="jsPswEdit ...
- 如何给HTML标签中的文本设置修饰线
text-decoration属性介绍 text-decoration属性是用来设置文本修饰线呢,text-decoration属性一共有4个值. text-decoration属性值说明表 值 作用 ...
- freecms怎样在信息列表类标签中提取info.content
原文地址:http://javaz.cn/site/javaz/site_study/info/2015/22026.html 项目地址:http://www.freeteam.cn/ 因为info. ...
- 关于meta标签中的http-equiv属性使用介绍
关于meta标签中的http-equiv属性使用介绍 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标 ...
- css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡
pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...
- a标签在编辑器中可以整体删除并且a标签为不可编辑的情况下 标签依然存在(棒棒哒)
a标签在编辑器中可以整体删除并且a标签为不可编辑的情况下 标签依然存在 因为给a标签的后面 添加了一个空元素,如<i></i>(棒棒哒)<div contentEdita ...
- ie8下a标签中的图片出现边框
1.ie8下a标签中的图片出现边框 <a href="#"><img src="horse.jpg"></a> 效果如图所示 ...
- ie下li标签中span加float:right不换行问题解决方案
在IE6,IE7下使用标签时,在加入右浮动样式(float:right)后,会换行的bug解决方案:bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行 <ul> <li> ...
随机推荐
- Error is 10055 由于系统缓冲区空间不足或队列已满,不能执行套接字上的操作
今天上午,一个同事反映:某系统的某个通过socket来进行通信的服务无法连接上数据库里,在操作系统上用数据库的客户端测试数据库连接也出现这样的错误信息:Error is 10055 由于系统缓冲区空间 ...
- 如何在Linux中关闭apache服务(转)
??? 最近在写一个简单的http服务器,调试的时候发现apache服务器也在机器上跑着,所以得先把apache关掉.当时装apache的时候就是用了普通的sudo get,也不知道装到哪儿了.到网上 ...
- 【BZOJ 1202】 [HNOI2005]狡猾的商人
Description 刁姹接到一个任务,为税务部门调查一位商人的账本,看看账本是不是伪造的.账本上记录了n个月以来的收入情况,其中第i 个月的收入额为Ai(i=1,2,3...n-1,n), .当 ...
- 微软职位内部推荐-Sr SDE-MODC-Beijing
微软近期Open的职位: JOB TITLE: Senior Software Design EngineerDEPARTMENT: Microsoft Office Division ChinaIM ...
- fzu 2105 Digits Count ( 线段树 ) from 第三届福建省大学生程序设计竞赛
http://acm.fzu.edu.cn/problem.php?pid=2105 Problem Description Given N integers A={A[0],A[1],...,A[N ...
- PAT-乙级-1016. 部分A+B (15)
1016. 部分A+B (15) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 正整数A的“DA(为1位整数)部 ...
- Discuz使用tools修复数据文件后,访问URL多出/source/plugin/tools,导致文章栏目无法访问
今天我的婚嫁亲子网数据库出了点错误,于是就用dz官方的tool工具修复了以下,然后就发生了这个错误.. 本来频道页面的地址是:http://www.ifen8.com/article/ 结果自动跳转成 ...
- "reactive programming"的概念
下面的内容大多是翻译来的. Reactive Programming? What is Reactive Programming? 为了了解Reactive——从编程范式至其背后的动机,有必要了解现在 ...
- chardet安装
1.下载 chardet-2.2.1.tar.gz (md5) https://pypi.python.org/pypi/chardet#downloads 2.解压至C:\Python27\Li ...
- hdu 1729 Stone Game 博弈论
那么对于这题对于每一堆,放石子放满就想当于满的时候取s-c个,反向只是让我理解题意更深. 首先我们知道(S,S)这个局面是必败局面.对于每一堆能加的数量有限,而当c的值(大于或者等于) D=sqrt( ...