Question

我目前的标记如下：

<li class="multi_answer"> 
    <label for="checkbox2">
        <div class="multi_answer_box">
            <input type="checkbox" id="checkbox2" name="checkbox2" class="multi_box" />
        </div>
        <div class="multi_answer_text">Checkbox Label</div>
    </label>
</li>

在所有但 firefox中运行良好。

在检查标记后，它将其读作......

<li class="multi_answer">
    <label for="checkbox1"> </label>
    <div class="multi_answer_box">
        <input id="checkbox1" class="multi_box" type="checkbox" name="checkbox1">
    </div>
    <div class="multi_answer_text"> Increased counseling staff </div>
</li>

为什么FF会以这种方式解释它？

我也在使用这个css

.multi_answer label:hover {
    background:#DDD;
}

.multi_answer_box input {
    padding-left:5px;
    padding-right:5px;
    float:left;
    height:48px;
    width:48px;
}

.multi_answer label {
    overflow: auto;
    cursor:pointer;
    width:auto;
    margin:10px;
    padding: 10px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background:#CCC;
    display:block;
}

http://jsfiddle.net/NhD3r/1/＆lt; ---- 工作示例

Answer 1

可能是因为label必须包含inline elements only，而不是像div这样的阻止元素。

的解的

将所有div替换为span保留预期的样式和功能，同时遵守上述规则。

<li class="multi_answer"> <label for="checkbox2"> <span class="multi_answer_box"> <input type="checkbox" id="checkbox2" name="checkbox2" class="multi_box" /> </span> <span class="multi_answer_text">Checkbox Label</span> </label> </li>

Answer 2

我无法复制你的问题，我正在使用FF6，无论如何，你应该尝试验证你的HTML，看看是否有任何可能导致FF表现的方式。还要尝试清除缓存（你永远不会知道......）

Answer 3

您可以重新组织HTML结构以使其有效并遵循规范并仍然可以获得所需的效果。

<li class="multi_answer">
    <div class="multi_answer_box">
        <input type="checkbox" id="checkbox3" name="checkbox3" class="multi_box" />
        <label for="checkbox3">Did some additional important stuff and things,
               with a description that's long enough to wrap</label>
    </div>
</li>

请参阅updated fiddle。

我在Linux上使用Firefox 3.6.12进行了这些更改和测试。

<label>内的<input />在Firefox </label>中无效

3 个答案: