<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标签——解析)的更多相关文章

  1. a 标签中加 onclick事件,根据事件中的校验情况来决定是否执行a标签的链接

    a 标签中加 onclick方法后,先执行onclick方法,在去执行a标签href下属性对应的动作,如果不想执行href属性下动作需要用false作为返回值. <a href="ht ...

  2. a标签中的javascript:;是什么

    a标签中的javascript:;是什么 一.问题 <a>标签中href="javascript:;"表示什么意思?? <a id="jsPswEdit ...

  3. 如何给HTML标签中的文本设置修饰线

    text-decoration属性介绍 text-decoration属性是用来设置文本修饰线呢,text-decoration属性一共有4个值. text-decoration属性值说明表 值 作用 ...

  4. freecms怎样在信息列表类标签中提取info.content

    原文地址:http://javaz.cn/site/javaz/site_study/info/2015/22026.html 项目地址:http://www.freeteam.cn/ 因为info. ...

  5. 关于meta标签中的http-equiv属性使用介绍

    关于meta标签中的http-equiv属性使用介绍 meta是html语言head区的一个辅助性标签.也许你认为这些代码可有可无.其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标 ...

  6. css pre如果同时运用了css的border-radius、 overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡

    pre如果同时运用了css的border-radius. overflow两个属性且标签中内容太多时,外部div滚动条在firefox下滚动时很卡. 解决方法:去掉css中border-radius. ...

  7. a标签在编辑器中可以整体删除并且a标签为不可编辑的情况下 标签依然存在(棒棒哒)

    a标签在编辑器中可以整体删除并且a标签为不可编辑的情况下 标签依然存在 因为给a标签的后面 添加了一个空元素,如<i></i>(棒棒哒)<div contentEdita ...

  8. ie8下a标签中的图片出现边框

    1.ie8下a标签中的图片出现边框 <a href="#"><img src="horse.jpg"></a> 效果如图所示 ...

  9. ie下li标签中span加float:right不换行问题解决方案

    在IE6,IE7下使用标签时,在加入右浮动样式(float:right)后,会换行的bug解决方案:bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行 <ul> <li> ...

随机推荐

  1. 【转】perl 变量 $/ 的用法解析 上下文为行模式时,$/ 定义以什么来区分行

    默认状态下,很显然都是用\n来区分行,\n也被我们称作为换行符. 当读取序列时,按行来读取时,就是以换行符为标准. 读取的strawberry1.gb的文件内容如下: LOCUS JX118024 4 ...

  2. 2016年辛星less教程发布了

    首先简介一下less吧,它是一个css预处理器.当我们的项目比较大的时候,我们的css的代码量也会急剧的膨胀,因此就有很多方案来让编程更加容易,没错,less就是这样一种技术. 在百度网盘的下载地址为 ...

  3. iOS runtime 与 runloop

    runtime是运行时机制,就是运行到的时候才会执行的机制(类似于栏加载)属于时间先后性质的 runloop 是主线程的运行的意思   属于 (loop) 循环性质的 以下是 具体点的 解释: run ...

  4. [转]struct实例字段的内存布局(Layout)和大小(Size)

    在C/C++中,struct类型中的成员的一旦声明,则实例中成员在内存中的布局(Layout)顺序就定下来了,即与成员声明的顺序相同,并且在默认情况下总是按照结构中占用空间最大的成员进行对齐(Alig ...

  5. ANN中Precision-Recall权衡

    如果想要得到较高的精度,则需要较长的编码. 编码长度m增长的话,则item碰撞的概率会成倍的减小,从而导致召回率下降. 为了得到较高的召回率,则需要多个哈希表. 参考http://yongyuan.n ...

  6. 团体程序设计天梯赛-练习集L1-002. 打印沙漏

    L1-002. 打印沙漏 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给 ...

  7. 【C++基础】sizeof 数组 指针 空NULL

    笔试遇到很多sizeof的小题,博主基础堪忧,怒总结如下,还是要巩固基础啊啊啊! sizeof操作符 对象所占 栈内存空间的大小,单位是字节 关键词:char  数组 指针 结构体 class [注意 ...

  8. How To Monitor Remote Linux Host using Nagios 3.0

    In the previous post Nagios 3.0 Jumpstart guide , I explained the overview, installation and configu ...

  9. Angular.js入门的样例

    感觉这下子,前端的路也宽多了,从容不迫了. 因为可控制的节点又推前了, 有空了好好学一下. 然后结合EXPRESS或METEOR,是不是有点爽? 参考URL: https://toddmotto.co ...

  10. sql快捷键

    请柬:https://msdn.microsoft.com/zh-cn/library/ms174205.aspx