JQuery UI аккордеон неудачу в IE8, IE9 и IE10

Довольно странно ошибка здесь с JQuery UI аккордеона ....JQuery UI аккордеон неудачу в IE8, IE9 и IE10

Version Info

Internet Explorer 8, 9 и 10 - > с включенным представлением совместимости.
JQuery UI 1.10.1
JQuery Ядро 1.9.1

Проблема Сценарий

У меня есть несколько отдельных аккордеоны вертикально уложенными. Когда я нажимаю на заголовок, чтобы свернуть или развернуть аккордеон сверху, элементы ниже скользят вверх и вниз, как вы ожидаете, чтобы освободить место для отображаемого/исчезающего содержимого. Тем не менее, заголовок для аккордеона прямо ниже остается парящим на месте, а все остальное скользит вниз. Выглядит очень плохо. Когда вы наводите курсор мыши на этот плавающий заголовок , он возвращается на место, где должно было быть.

Код

Надеюсь, я могу мириться jsFiddle позже, если/когда моя работа разблокирует сайт (закатывает глаза). Сейчас, вот упрощенная версия коды:

<script> 
    $(document).ready(function() 
    { 
     $(".accordion").accordion(
     { 
      collapsible: true, 
      active: 0, 
      heightStyle: 'content',    
      icons: { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } 
     }); 
    }); 
</script> 
<style> 
    .whitebackground { background-color: #FFF; } 
    .contentDiv { height: 70px; background-color: lightblue; } 
</style> 
<div>  
    <div class="whitebackground"> 
     <table> 
      <tr> 
       <td> 
        <div class="accordion"> 
         <h3>Accordion Header 1</h3> 
         <div> 
          <div class="contentDiv"> 
           Some content here 1 
          </div> 
         </div> 
        </div> 
       </td> 
      </tr> 
     </table> 
     <table> 
      <tr> 
       <td> 
        <div class="accordion"> 
         <h3>Accordion Header 2</h3> 
         <div> 
          <div class="contentDiv"> 
           Some content here 2 
          </div> 
         </div> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </div> 
</div>

ВОПРОИЗВЕДЕНИЕ Bug

Чтобы воспроизвести ошибку, просто попробуйте свернуть верхний аккордеон, нажав на заголовке, и вы будете немедленно см. вопрос.

Я свел ...

Я был в состоянии сузить точный вопрос, который вызывает это. Если вы удалите белый CSS-класс, проблема исчезнет. Почему в мире это происходит? Это похоже на ошибку, ребята?

Пожалуйста, прочитайте эту последнюю часть

Да, мне нужно держать мой HTML структуру, как она есть. Я значительно упростил это для этого примера, сохраняя при этом ошибку. Достаточно сказать, что я действительно хочу сохранить элемент TABLE на месте. Не нужно предлагать удалить его. И мне нужно, чтобы DIV сразу же включил TABLE, чтобы указать цвет фона CSS. Кроме того, у меня не может быть отключено «представление совместимости» в IE, потому что наша групповая политика AD заставляет его выполнять все для доступа к внутренним веб-приложениям.

Любые идеи?

источник

2013-04-22 ClearCloud8

Я не получаю то же самое в скрипке в IE9, вот скрипка для всех, кто интересуется: http://jsfiddle.net/PAjep/ –

Ага ... еще одна вещь, которую я только что заметил. Вы должны нажать кнопку, чтобы включить «Обозреватель» в IE. Вы можете воссоздать проблему сейчас? – ClearCloud8

Зачем ты это делаешь? Вы должны указать doctype, чтобы использовать IE в стандартном режиме. – Bojangles

Это, по-видимому, вызвано положением: относительное правило css, применяемое к заголовку .ui-accordion. Комментируя это, похоже, исправляет проблему в режиме совместимости IE.

.ui-accordion .ui-accordion-header { 
    display: block; 
    cursor: pointer; 
    /*position: relative;*/ 
    margin-top: 2px; 
    padding: .5em .5em .5em .7em; 
    min-height: 0; /* support: IE7 */ 
}

Однако это приводит к тому, что значки заголовков отображаются не в том месте. Вам нужно будет настроить их css для компенсации. Могут быть и другие побочные эффекты.

источник

2013-08-06 16:52:39 ctsears

JQuery UI аккордеон неудачу в IE8, IE9 и IE10

ответ

Смежные вопросы