похоже на проблемы с hasLayout, но zoom: 1 не помогает. Помогает задать контейнеру (#accordion) маленькую ширину, либо большую ширину, но тогда вместе с float. В двух словах, пропадают margin'ы при клике по заголовкам, но если подвигать мышкой - восстанавливаются. Причем не на каждом клике срабатывает. И у меня проявляется только в ie8 из под ietester (но проблема наблюдалась из под обычного ie8, так что дело не в ietester)
вариант номер раз: пропадает margin у header 1 (и заголовки аккордеона как-то странно скачут)
<!doctype html>
<html>
<body>
<!-- [ общий код -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<style type="text/css">
h3 { margin: 10px; }
h4 { margin: 40px; background: #ffc; }
#accordion { background: #cfc }
</style>
<!-- [ код из демки -->
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
<!-- код из демки ] -->
<h4>header 1</h4>
<h4>header 2</h4>
<h4>header 3</h4>
</div>
<script type="text/javascript">
$("#accordion").accordion();
</script>
<!-- общий код ] -->
</body>
</html>
вариант номер 2: пропадают все margin'ы у всех header'ов и подвал "падает"
<!doctype html>
<html>
<body>
<div style="
float: left;
width: 200px;
height: 1000px;
background: #cfc;
"></div>
<div style="
margin-left: 200px;
">
<!-- [ общий код -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script>
<style type="text/css">
h3 { margin: 10px; }
h4 { margin: 40px; background: #ffc; }
#accordion { background: #cfc }
</style>
<!-- [ код из демки -->
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.
</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus
et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
mauris vel est.
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos.
</p>
</div>
</div>
<!-- код из демки ] -->
<h4>header 1</h4>
<h4>header 2</h4>
<h4>header 3</h4>
</div>
<script type="text/javascript">
$("#accordion").accordion();
</script>
<!-- общий код ] -->
<div style="
clear: both;
"></div>
</body>
</html>
как спровоцировать эффект:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<style type="text/css">
h1 { margin: 90px; background: #ffc; }
</style>
<div style="width: 600px; float-: left;">
<h1 id="header-1">header-1</h1>
<h1 id="header-2">header-2</h1>
<h1 id="header-3">header-3</h1>
<a id="link" href="#">link</a>
</div>
<script type="text/javascript">
function $( id ){ return document.getElementById(id); }
$('link').onclick = function(){
$('header-2').style.overflow = 'hidden';
$('header-1').setAttribute('whatever-suits', 1);
setTimeout(function(){
$('header-2').style.display = 'none';
}, 0);
return false;
}
</script>
</body>
</html>
что самое интересное, вот соответствующий код
// TODO assert that the blur and focus triggers are really necessary, remove otherwise
toHide.prev()
.attr({
"aria-expanded": "false",
tabIndex: -1
})
.blur();
toShow.prev()
.attr({
"aria-expanded": "true",
tabIndex: 0
})
.focus();
т.е. они думают, не убрать ли этот кусок. Причем если убрать, баг скорее всего исчезнет
В дополнение в том же ie8 (не только в ietester) пропадают margin'ы у заголовков аккордеона (опять же восстанавливается, если пошевелить мышью). Баг можно наблюдать... внимание!.. в
демке на оффициальном сайте
И еще, у содержимого первого пункта появляется прокрутка (при возвращении к нему). Опять ie8. Решается добавлением overflow: auto/hidden.
p.s. привет разработчикам jQuery
