a标签中的label在IE下触发不了a标签的href链接(label标签——解析)
2014-06-20 11:59
537 查看
<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 href链接不能跳转
- js如何触发a标签的href链接,以标签页的形式
- IE 下修改a标签的href的值碰到的怪象
- IE中过多style标签的解析错误
- IE Bug 1 - 错误识别出现在javascript脚本中的字符串,导致HTML标签解析错误
- Asp.net 火狐和IE的兼容性代码解析本篇文章来源于:开发学院 http://edu.codepub.com 原文链接:http://edu.codepub.com/2010/0308/20818.php
- 用链接标签触发onclick事件而不跳转
- 把js写到链接a标签的href中和写到onclick中的区别
- jsp页面中使用超链接标签<a>中的属性<href>和<onclick>同时触发怎么执行
- 用链接标签触发onclick事件而不跳转
- 离开页面的判断:window.Onunload与window.onbeforeunload的区别(IE下a标签触发问题)
- IE7点链接打开两个标签页的解决方法
- (随手记)a href链接,在新标签/窗口中打开
- PHP实现点击a标签的href做链接时,直接保存文件(任何类型),而不是通过浏览器直接打开下载的文件
- 解决IE下a标签会触发window.onbeforeunload的问题
- 去除链接A标签周围的虚线框(IE、Firefox)
- flash上加链接a标签--IE,FireFox测试通过
- 发现IE中替换a标签href属性的一个bug或是疑惑。
- IE中替换a标签href属性的一个bug