Ошибка аккордеона JQuery в IE 8? Обходной путь?

Чтобы увидеть эту ошибку анимации аккордеона, перейдите на страницу http://hopplayground.com/ в Internet Explorer 8 (IE8).

Нажмите на «Биос». Первый щелчок по пункту меню должен открыть подменю. Но это не так, ничего не появляется. Второй щелчок как бы закрывает меню, но оставляет артефакты. Использование других меню работает корректно.

Вопрос: Что вызывает этот сбой, и есть ли способ его решить или обойти?

Я использую jQuery 1.4.2 с пользовательским интерфейсом jQuery 1.8.2. Функциональность отлично работает в Firefox и Safari.

ТТФН Трэвис


animation jquery accordion internet-explorer-8
person Travis Smith    schedule 22.06.2010    source источник

Ответы (5)


arrow_upward
8
arrow_downward

Не уверен, в чем проблема, поэтому, если вместо решения подойдет обходной путь, страница работает для меня в IE7, поэтому вы можете добавить следующий метатег в свой документ <head>:

  <meta http-equiv="X-UA-Compatible" content="IE=7" />

Это заставит IE8 перейти в режим совместимости с IE7. Использование этого тега уменьшает кроссбраузерные проблемы.

person mVChr    schedule 22.06.2010
comment
Это очень плохое решение такой проблемы, оно двигает Интернет назад, а не вперед... лучше решить реальную проблему рендеринга. Подумайте об этом так: что происходит, когда пользователи обновляются до IE9? - person Nick Craver; 22.06.2010
comment
@Nick - я понимаю вашу точку зрения и согласен с тем, что лучше решить реальную проблему, но я хотел дать практическое решение на случай, если целесообразность будет решающим фактором. - person mVChr; 22.06.2010
comment
@nick Я действительно думаю, что ты прав, и я делаю все возможное, чтобы продвинуть Интернет вперед вместе с остальной частью того, что я делаю на сайте, но я также думаю, что сейчас я должен делать то, что лучше всего. Спасибо @mvchr. Я отдам вам должное, если не появится лучшего ответа. - person Travis Smith; 22.06.2010
comment
к сожалению, это единственное, что сработало для меня. Единственное различие заключается в том, что я добавил условные комментарии, чтобы, если пользователь просматривал с помощью IE9, он получал настройки IE9, а не IE7. например ‹!-- [если IE 8] --› ‹meta http-equiv=X-UA-Compatible content=IE=7 /› ‹!-- [endif] --› - person Code Novitiate; 29.01.2013

arrow_upward
4
arrow_downward

Просто подумал, что добавлю свои два цента. Основываясь на ответе mVChr, вы можете использовать:

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

Установив его на край, он заставляет IE использовать последний доступный движок рендеринга. У меня была такая же проблема, и это было исправлением для меня.

Этот веб-сайт ребят рассказывает об этом больше, если вы ищете дополнительную информацию:

http://farukat.es/journal/2009/05/245-ie8-and-the-x-ua-совместимая-ситуация

person AndyM    schedule 21.06.2012

arrow_upward
1
arrow_downward

вы можете добавить стили к аккордеону, например: .accordion {display:table} из-за того, что у ie есть некоторые проблемы с display:inline, которые использует jquery...

person RikawaS    schedule 21.10.2010

arrow_upward
1
arrow_downward

Судя по ответу RikawaS...

В заголовках аккордеона только разместите следующий код css:

.accordionHeader { display: table; ширина: 100%; }

Если вы обнаружите, что заголовки все еще прыгают при наведении курсора между ними, используйте верхние границы, используя сплошной цвет, а не поля и отступы. Конечно, это работает только с рисунками поверх сплошных цветов (цвет границы должен соответствовать цвету фона). Вот пример:

.accordionHeader { border-top: 10px solid #FFFFFF; }

Это исправит IE8! Мне понадобился год, чтобы понять, лол.

person Andrew Howard    schedule 07.01.2011

arrow_upward
0
arrow_downward

Я получил это из другого поста:

Вот ссылка на него: Почему не будет раздела аккордеона jQuery активировать в IE 8?

I ran into this same problem. IE is very finicky about proper html and making sure that inside your accordion, there is nothing outside the

structure, for example, it you have this:

<h3>a header</h3>
<div>some content</div>
<h3>another header</h3>
<div>some more content</div>

это будет работать, но это не будет:

<h3>a header</h3>
<div>some content</div>
<span>extra stuff</span>
<h3>another header</h3>
<div>some more content</div>

Все это будет внутри любого элемента, для которого вы вызываете .accordion().

person Erik Grosskurth    schedule 29.08.2013