jQuery Аккордеон + Якорный тег «застрял как блок» ошибка? - PullRequest
Новая
       9

jQuery Аккордеон + Якорный тег «застрял как блок» ошибка?

0 голосов
/ 15 апреля 2010

Пример страницы:

http://jsbin.com/ohuze/2

Это простой JQuery UI Accordion. Каждая панель аккордеона имеет UL (OL работает одинаково) с такой разметкой: 

<ol>
        <li><a href="">Lorep ipsum dolor lorem ipsum dolor lorem ipsum dolor</a>?</li>
        <li><a href="">Lorep ipsum dolor lorem ipsum dolor lorem ipsum dolor</a>?</li>
</ol>

В IE6 вы увидите, что тег отображается как элемент блока, поэтому знак вопроса в конечном итоге выталкивается наружу, а не в конце строки текста. Кроме того, номер маркера и / или элемента списка теперь выравнивается по тексту снизу, а не по верху.

Я сузил его до javascript, который исполняется для создания аккордеона. Это не проблема с CSS в jQuery, так как отключение, которое само по себе не решает проблему.

Кто-нибудь знает, что может происходить в IE6, чтобы вызвать эту проблему рендеринга?

ОБНОВЛЕНИЕ: По-видимому, это также проблема IE7.

ОБНОВЛЕНИЕ 2: После еще большей игры я немного сузил круг вопросов:

  • ошибка не имеет никакого отношения к спискам. Проблема заключается в том, что любой тег привязки в jQuery Accordion будет отображаться как display: block (даже если кажется, что CSS все еще показывает display: inline)

  • ошибка не имеет ничего общего с фактическим CSS, который jQuery UI использует для создания аккордеона. Я создал тестовую страницу, которая использует полностью обработанный исходный код jQuery Accordion после обработки и сопровождающий CSS. В этой ситуации теги привязки остаются встроенными.

В заключение: похоже, что процесс рендеринга аккордеона через javascript портит теги привязки. Это может быть проблема показать / скрыть?

1 Ответ

0 голосов
/ 17 апреля 2010

Решение:

Оказывается (не удивительно), что это проблема макета с IE6. Когда jQuery UI начинает создавать Аккордеон, теги привязки теряют макет (или им присваивается has-layout?). Решение состоит в том, чтобы добавить функцию обратного вызова, которая переустанавливает ее (я думаю), НЕ имеет has-layout: 

$('.myDiv').accordion({ 
    collapsible: true, 
    autoHeight: false,
    active: false,
    change: function(){$(this).find('a').css('zoom','0')}
    });
...