0

我有这个简单的 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 重叠？

4

2 回答 2

1

也许 IE 正在按照它们的意图进行解释fieldset和字面意思（图例是 fieldset 的直接后代 - http://www.w3.org/wiki/HTML/Elements/fieldset）并且正在应用一些浏览器特定的样式，这会弄乱你的意图。 legend

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

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

于 2013-10-08T09:05:10.270 回答
1

将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

于 2013-10-08T09:03:02.013 回答