zoukankan      html  css  js  c++  java
  • 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标签本身不就是这么用的。

      

  • 相关阅读:
    动态规划_leetcode416
    动态规划_leetcode377
    基础整理
    super使用简介
    PHP替换指定字符串
    yii安装redis扩展(Windows)
    PHP多维数组去重
    git pull
    vue页面部署并移除url里面的#号
    fatal: refusing to merge unrelated histories(git pull)
  • 原文地址:https://www.cnblogs.com/wanliyuan/p/3799049.html
Copyright © 2011-2022 走看看