jquery - 如何避免 ui-block div (jquery mobile) 在 Internet Explorer 中重叠？

Question

我有这个简单的 div，以 jquery 移动风格开发:

  <fieldset class="ui-grid-b"> 
      <div class="ui-block-a">
      <legend>Question 1 haveng a looong text to explain what the user need to answer</legend>
      </div>
      <div class="ui-block-b">
          <select name="question1" id="question1">
            <option value='0'>Choose...</option>
    <option value='1'>Option 1</option>
    </select>
    </div> 
    <div class="ui-block-c" id="id-error">
        <label for="question1" class="error" generated="true"></label>
    </div>
 </fieldset>

CSS:

.ui-grid-b .ui-block-a { 
padding-top:20px;   
width: 60%;
}
.ui-grid-b .ui-block-b { 
width: 30%; 
} 
.ui-grid-b .ui-block-c {
width: 10%; padding-top:20px;
} 

该代码表示​​一个页面分为三列(div ui-block-a、ui-block-b、ui-block-c)，分别占据整个页面空间的60%、30%和10%。在地球上的每个浏览器上都可以正常工作，但在资源管理器上却不行。在资源管理器上，如果 ui-block-a 文本太长，它不会在新行上继续，而是在选择 下继续。如何避免 ui-block-a 与 ui-block-b 重叠？

Answer 1

也许 IE 正在按预期按字面解释 fieldset 和 legend(图例是 fieldset - http://www.w3.org/wiki/HTML/Elements/fieldset 的直接后代)并且正在应用一些特定于浏览器的样式那是在打乱你的意图。

如果您使用 div 而不是字段集和图例来尝试这种布局，我猜它会起作用。

由于浏览器通常将字段集的图例呈现为父容器顶部的 float 标题，从而中断了边框(参见示例 http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset)，我认为 IE 会通过强制不换行来确保此行为。