爲什麼「Legend」在ie8中沒有樣式？

Question

<form class="form" id="profile_form"> 
    <legend>Your profile</legend> 
    <div class="control-group "> 
     <label class="control-label">Phone</label> 
     <div class="controls"> 
     <input type="text" id="phone" class="span5"> 
     <div class="help-block phone_not_confirmed need_confirm"> 
      To confirm your phone number, please check for a text message from us. 
     </div> 
     <label class="checkbox"> 
     <input type="checkbox" id="phone_visible"> 
      Display my phone number to the public 
     </label> 
     </div> 
    </div> 

.... ....

在IE8中，文本 「您的個人資料」 出現，但它是無樣式。注意：我正在使用Bootstrap。

Answer 1

IE中存在一個奇怪的行爲。 IE7 & IE8關閉它在不在fieldset元素內時遇到的圖例元素，並將其內容移出到相鄰​​的文本節點。

因此，解決方法是將您的圖例包裝在字段集中。

來源：http://html5doctor.com/legend-not-such-a-legend-anymore/

Answer 2

HTML5被髮明之前，IE8正式發佈。因此，它對HTML5規則一無所知，並且堅持HTML4規則。

根據HTML4規則，<legend>標記僅在標記爲<fieldset>的孩子時有效。

因此，您的代碼被IE8視爲無效標記。一旦你有無效的標記，你不能保證瀏覽器將做什麼。

在HTML5下，關於它在<fieldset>中的規則不再適用，所以現代瀏覽器應該沒問題。但IE8等較舊的瀏覽器很可能會遇到困難。

如果您需要支持IE8，我的建議是使用<div>或其他通用標籤，或者如果它是語義的（在這種情況下），則將其包裝在<fieldset>中。