Skip to main content

Search and Top Navigation

#7828 closed bug (cantfix)

Opened November 01, 2011 08:04AM UTC

Closed November 01, 2011 12:25PM UTC

Last modified November 01, 2011 01:15PM UTC

Using jquery ui accordion on ie6

Reported by: jzzl@msn.com Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.accordion Version: 1.8.16
Keywords: Cc:
Blocked by: Blocking:
Description

I want a div to control accordion, div a fixed width and height,

But found ie9 display normal, ie6 is displayed incorrectly

For convenience,I modify the demo (demos\\accordion\\default.html), the code is as follows

use jquery 1.6.2 and jQuery UI 1.8.16

<div class="demo" style="height:150px; overflow:auto;width:800px; border:solid 1px red;">

<div id="accordion" style="width:600px;">

<h3><a href="#">Section 1</a></h3>

<div>1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br />11<br /></div>

<h3><a href="#">Section 2</a></h3>

<div style="height:200px;">2</div>

<h3><a href="#">Section 3</a></h3>

<div style="height:200px;">3</div>

<h3><a href="#">Section 4</a></h3>

<div style="height:200px;">4</div>

</div>

</div>

<script>

$(function() {

$( "#accordion" ).accordion();

});

</script>

ie9 result is as follows,Scroll bar in a div

http://hi.baidu.com/jzzxl2008/album/item/51615583ee8ac5d70df4d26d.html#

ie6 result is as follows,Div scroll bar also, but more than the height of accordion div, and click the accordion, the layout a bit chaotic

http://hi.baidu.com/jzzxl2008/album/item/d37bb539ea6d5ab7d462256d.html#

Hope to get help

Attachments (0)
Change History (2)

Changed November 01, 2011 12:25PM UTC by scottgonzalez comment:1

component: ui.coreui.accordion
resolution: → cantfix
status: newclosed

This is a known rendering bug in IE. Relatively positioned elements inside overflow elements don't adhere to the overflow. To fix this, you need to make your overflow container also use position relative.

Changed November 01, 2011 01:15PM UTC by jzzl@msn.com comment:2

thanks,i modify the div css is as follows

<div class="demo" style="height:150px; overflow:auto;width:800px; border:solid 1px red;position:relative;">