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

Question

第二种写法在谷歌浏览器（版本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>

Answer 1

input写在label里面

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