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

Question

我有这个简单的 div，用 jquery mobile 风格开发：

  <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（图例是字段集的直接后代 - http://www.w3.org/wiki/HTML/Elements/fieldset），并且正在应用一些浏览器特定的样式，这会扰乱您的意图。

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

由于字段集的图例通常由浏览器呈现为父容器顶部的浮动标题，因此中断了边框（参见示例http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset），我认为 IE 是通过强制换行来确保这种行为。

Answer 2

把css改成

div{
   word-break: break-all; 
 }
.ui-grid-b .ui-block-a { 
padding-top:20px;   
width: 60%;
float:left;
}
.ui-grid-b .ui-block-b { 
width: 30%; 
float:left;
} 
.ui-grid-b .ui-block-c {
width: 10%; padding-top:20px;
float:left;
} 

演示：jsfiddle