JQuery акордеон грешка в IE 8? Заобиколно решение?

За да видите тази грешка в анимацията на акордеон, отидете на http://hopplayground.com/ с Internet Explorer 8 (IE8)

Кликнете върху „Биос“. Първото щракване върху елемент от менюто трябва да отвори подменюто. Но не става, нищо не се появява. Второто щракване някак си затваря менюто, но оставя артефактите. Използването на други менюта работи правилно.

Въпрос: Какво причинява този проблем и има ли начин да го разрешите или заобиколите?

Използвам jQuery 1.4.2 с jQuery UI 1.8.2. Функционалността работи перфектно във Firefox и Safari.

TTFN Травис


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" />

Като го настроите на edge, той принуждава IE да използва най-новия наличен двигател за изобразяване. Имах същия проблем и това беше решение за мен.

Този уебсайт на момчета говори повече за това, ако търсите повече информация:

http://farukat.es/journal/2009/05/245-ie8-and-the-x-ua-compatible-situation

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 { дисплей: таблица; ширина: 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