0

jquery モバイル スタイルで開発されたこの単純な div があります。

  <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;
}

このコードは、3 つの列 (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し、legend文字通り (凡例はフィールドセットの直接の子孫です - http://www.w3.org/wiki/HTML/Elements/fieldset )、ブラウザ固有のスタイリングを適用して、あなたの意図。

divフィールドセットと凡例の代わりに 's を使用してこのレイアウトを試すと、うまくいくと思います。

フィールドセットの凡例は通常、ブラウザーによって親コンテナーの上部にあるフローティング タイトルとしてレンダリングされるため、境界線が中断されます (例http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldsetを参照) 。ラップを強制的になしにすることで、この動作を保証しています。

于 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 に答える