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＆amp;当IE8不在fieldset元素中并将其内容移出到相邻的文本节点时，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>中（它在这种情况）。

为什么“Legend”没有在ie8中设计？

2 个答案: