Как избежать того, чтобы div-интерфейс ui-block (jquery mobile) перекрывался в Internet Explorer?

Question

Как избежать того, чтобы div-интерфейс ui-block (jquery mobile) перекрывался в Internet Explorer?

0

У меня есть эти простые divs, разработанные в стиле 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-текст слишком длинный, вместо продолжения на новой строке, он продолжается под выбором. Как я могу избежать перекрытия ui-block-a с помощью ui-block-b?

Sasha Grievus 08 окт. 2013, в 11:10

Источник

Теги:

jquery

css

jquery-ui

jquery-mobile

2 ответа

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

demo: jsfiddle

user2779544 08 окт. 2013, в 07:17

0

не повезло, даже добавив! важно для поплавка: осталось ...
Sasha Grievus 08 окт. 2013, в 09:06
1

пожалуйста, смотрите редактирование это может помочь
user2779544 08 окт. 2013, в 09:07
0

Большое спасибо за помощь, но проблема заключалась в поведении тега легенды, как указано в ответе перед вашим ^^
Sasha Grievus 08 окт. 2013, в 09:18

Показать ещё 1 комментарий

Ещё вопросы

не повезло, даже добавив! важно для поплавка: осталось ...
пожалуйста, смотрите редактирование это может помочь
Большое спасибо за помощь, но проблема заключалась в поведении тега легенды, как указано в ответе перед вашим ^^

Stephen James · Accepted Answer · 2013-10-08T07-03-00.000Z

Возможно, IE интерпретирует fieldset и legend буквально, поскольку они предназначены (с легендой, являющейся прямым потомком fieldset - http://www.w3.org/wiki/HTML/Elements/fieldset), и применяет некоторый стиль, специфичный для браузера, который является беспорядочным ваши намерения.

Если вы попробуете этот макет с div вместо fieldset и легенды, я думаю, что это сработает.

Так как легенда о полете обычно отображается браузерами как плавающий заголовок в верхней части родительского контейнера, прерывая границу (см. Пример http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset), я думаю, что IE обеспечивает это поведение, заставляя обертку ни к чему.

Вы центрировали проблему! Удаление всего тега легенды было достаточно для правильного поведения во всех браузерах (и я узнал что-то новое) Большое спасибо!