谷歌浏览器下绑定label和input后,点击label不能触发input点击事件

第二种写法在谷歌浏览器(版本80.0.3987.42)下,点击label无法触发对应checkbox的选中,换了个98.0.4758.102的版本就没问题了,是存在兼容方面的问题吗,为什么其他三种写法没问题呢。

可是连那么拉的IE8都能测试通过,感觉又不像不兼容,枯了-_-


     <div>
          <a href="javascript:void(0);">
            <span>1-提示:</span>
            <input id="cbIpt1" type="checkbox">
            <label for="cbIpt1">允许</label>
        </a><br>
        <a href="javascript:void(0);">
            <span>2-提示:</span>
            <input id="cbIpt2" type="checkbox">
            <label for="cbIpt2"><span>允许</span></label>
        </a><br>
        <div>
            <span>3-提示:</span>
            <input id="cbIpt3" type="checkbox">
            <label for="cbIpt3">允许</label>
        </div>
        <div>
            <span>4-提示:</span>
            <input id="cbIpt4" type="checkbox">
            <label for="cbIpt4"><span>允许</span></label>
        </div>
    </div>

input写在label里面

            <label for="cbIpt4"><input id="cbIpt4" type="checkbox"><span>允许</span></label>

跟a标签是否有关系;
放在label里无需指定for;
在外面需要指定for;