为什么"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元素内并将其内容移出到相邻​​的文本节点时,IE7和IE8会关闭它遇到的图例元素.

因此,解决方法是将您的图例包装在字段集中.

资料来源:http://html5doctor.com/legend-not-such-a-legend-anymore/

Answer 2

IE8在HTML5发明之前发布.因此,它对HTML5规则一无所知,并坚持使用HTML4规则.

根据HTML4规则,<legend>标记仅在标记的子项时有效<fieldset>.

因此,您的代码被IE8视为无效标记.一旦获得无效标记,就无法保证浏览器将要执行的操作.

在HTML5下,关于它的规则<fieldset>不再适用,所以现代浏览器应该没问题.但像IE8这样的旧浏览器很可能会挣扎.

如果你需要支持IE8,我的建议是使用一个<div>或其他通用标签,或者将它包装在一个<fieldset>if if的语义中(在这种情况下就是这样).