Question

我已经对此做了很多研究，但仍然无法确定我的按钮无法正常工作的原因。如果双击它们，它们可以工作，但不能单击。输入未包含在标签标签中。

<div id="map-overlay">
<div id="filters" class="menu-ui">
    <form>

        <label for="Perm. < 5 years" class="radio-label"></label>
        <input id="Perm. < 5 years" name="checkbox" type="radio">


        <label for="Temp. < 5 years" class="radio-label"></label>
        <input id="Temp. < 5 years" name="checkbox" type="radio">


        <label for="Temp. > 5 years" class="radio-label"></label>
        <input id="Temp. > 5 years" name="checkbox" type="radio">


        <label for="Perm. > 5 years" class="radio-label"></label>
        <input id="Perm. > 5 years" name="checkbox" type="radio">

    </form>
</div>

这些在Chrome，Safari等中运行良好。

Answer 1

首先，我认为你应该重新考虑你的ID，因为它们看起来格格不入，对于通过CSS进行定位不会非常有用。

其次我认为你的HTML应该更像这样

    <label for="Permlt5Years" class="radio-label">
         Perm. < 5 years
         <input id="Permlt5Years" name="checkbox" type="radio">
    </label>

单击标签应为您选择一个单选按钮。通过直接输入验证https://validator.w3.org/check对html5 doctype进行验证时，它有11个错误。

单选按钮在Firefox中不起作用

1 个答案: