如何避免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-塊一個，UI塊頁面-b，ui-block-c），分別佔整個頁面空間的60％，30％和10％。所有在地球上的每個瀏覽器上工作正常，但不在瀏覽器上。在資源管理器中，如果ui-block-a文本太長，而不是繼續新行，則繼續下的 select。我如何避免ui-block-a與ui-block-b重疊？

Answer 1

也許IE被訓釋fieldset並legend字面上因爲它們的目的（與圖例是字段集的直接後代 - http://www.w3.org/wiki/HTML/Elements/fieldset），並且是應用一些瀏覽器特定的風格，搞亂了你的意圖。

如果您嘗試使用div而不是字段集和圖例進行佈局，我的猜測是它會起作用。

由於字段集的圖例通常由瀏覽器呈現爲父容器頂部的浮動標題，因此會中斷邊界（請參閱示例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