<input/>內<label>在Firefox

不工作

<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/ < ---- 工作示例

來源

2011-08-31 jondavidjohn

大概是因爲label必須包含inline elements only，並不能阻止像div元素。

SOLUTION

「與span小號的替換所有div，同時用上述規則遵守留存旨在造型和功能。

<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>

來源

2011-08-31 16:57:17

好想，但我已經改變了這個在CSS中，對不起，我會添加到這個問題。 – jondavidjohn

你不能通過CSS使塊元素成爲內聯元素。甚至在考慮CSS之前，HTML解析器都會「糾正」你的輸入。 – kay

我不是，我正在做一個內聯元素塊元素... – jondavidjohn

我不能複製你的問題，我使用FF6，反正你應該嘗試驗證自己的HTML，看看是否有什麼可能導致FF表現它的方式。也可以嘗試清除您的緩存（你永遠無法知道...）

來源

2011-08-31 17:01:41

您可以重新組織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進行了測試。

來源

2011-08-31 17:15:32

<input/>內<label>在Firefox

回答

相關問題