Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.09.2010, 14:24
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

jquery accordion bug (ie8)
похоже на проблемы с 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
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с Accordion jquery Vitaly jQuery 8 17.07.2014 17:14
Jquery doctype + ie8 alizid Internet Explorer 5 21.08.2010 13:39
IE8 + jQuery + $.ajax Sh0dan Internet Explorer 5 08.08.2010 20:47
Jquery accordion, переделка скрипта. BassEast jQuery 0 26.02.2010 10:57
jQuery не работает ни в IE8 ни в Firefox Jon Events/DOM/Window 7 09.01.2010 23:39