jQuery akordeon eklentisi ve IE7 ile garip bir sorunum var (ve belki daha önce test edemedik). ThemeRoller ile oluşturulmuş özelleştirilmiş bir jQuery UI teması kullanıyorum. Renkleri, kenar boşluklarını ve kenarlıkları ayarlamak için biraz değiştirdim. Akordeon, ana içeriğimin içine yerleştirilmiş olan bir DIV içinde yer almaktadır. Basitleştirilmiş işaretleme ve CSS aşağıda. Temel olarak içerik, sınırlarla çevrili ortalanmış bir kutudur. Menü, kutunun üst kısmının altından kaydırılır ve sol kenarın üzerinde yüzer.jQuery akordeon ve IE7 ile katman sorunu
Sorun, IE7'de bir kez menünün üzerine geldiğimde, altta yatan main DIV arasındaki sınırların akordeon boyunca gösterilmesidir. Bu FF veya Safari'de gerçekleşmez. Sorunun nedeni, varsayılan akordeon CSS'nin 1'lik bir z-indeksi oluşturmasıdır? Bu unsurların hepsi arkalarındaki DOM öğelerinin üst kısmında görünmemeli mi? Ve neden sadece vurgulu?
Bu sorunu zaten çözdüm ve çözümü bir yanıt olarak göndereceğim.
<div id="main" style="position: relative;">
<div id="main-menu">
<ul id="navigation" class="ui-accordion">
<li>
<div class="ui-accordion-header">
</div>
<div class="ui-accordion-content">
</div>
</li>
</ul>
</div>
</div>
CSS
#main
{
clear: both;
padding: 30px 30px 30px 30px;
background-color: #fff;
border: solid 1px #669933;
margin-bottom: 30px;
min-height: 500px;
height: auto !important;
height: 500px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
}
#main-menu
{
position: absolute;
top: 1em;
left: -1em;
}
#navigation
{
width: 10em;
}
/*UI accordion*/
.ui-accordion {
/*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.5; text-decoration: none; font-size: 100%; list-style: none;
font-family: Verdana, Arial, sans-serif;
font-size: 1.1em;
/* additions from default */
background-color: #ffffff;
color: #333333;
border: solid 1px #336600;
text-indent: 0.2em;
z-index: 1;
}