jQuery Accordion + Anchor Tag 'stuck as block' bug?

Question

Sample page:

http://jsbin.com/ohuze/2

This is a simple jQuery UI Accordion. Each accordion panel has an UL (an OL works the same) with this markup:

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

In IE6, you'll see that the <a> tag appears to be getting rendered as a block element, so the question mark ends up being pushed outside and not at the end of the line of text. In addition, the bullet and/or list item number is now bottom-aligned with the text rather than top-aligned.

I've narrowed it down to the javascript that executes to make the accordion. It's not an issue with jQuery's CSS as disabling that, alone, doesn't resolve the issue.

Anyone know what might be going on in IE6 to cause this rendering issue?

UPDATE: Apparently, this is also an IE7 issue.

UPDATE 2: After some more playing, I've narrowed things down a bit more:

• the bug has nothing to do with lists. The issue is any anchor tag within a jQuery Accordion will appear as display: block (even though it appears that the CSS still indicates display: inline)

• the bug has nothing to do with the actual CSS that jQuery UI uses to create the accordion. I created a test page that uses the fully rendered jQuery Accordion post-processed source code and the accompanying CSS. In that situation, the anchor tags remain inline.

In conclusion: It appears that the process of rendering the accordion via javascript is messing up the display of the anchor tags. It may be a show/hide issue?

Answer 1

Solution:

Turns out (no surprise) that it's a has-layout issue with IE6. When jQuery UI kicks in to build the Accordion, somehow the anchor tags lose layout (or are they given has-layout?). The solution is to add a call back function that re-sets it to (I think) NOT have has-layout:

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