Je construis actuellement un site Web qui utilise Projekktor pour lire les films et JQuery pour presque tout le reste, à savoir, la navigation, l'affichage des panneaux, etc. Le lien de développement est - http://www.hundredframes.com/dev/home/menu déroulant ne pas afficher dans IE7
Je Le site fonctionne sur Firefox, Chrome, Safari et Opera. Mais comme toujours, IE m'a coincé. J'utilise le filtre de matrice IE pour incliner le texte et Cufon pour rendre les polices. Le workflow est - l'utilisateur clique sur un lien. S'il a un sous-menu, le premier élément du sous-menu est surligné et le contenu de ce lien est affiché.
Actuellement, dans IE7, le contenu du premier lien de sous-menu est affiché mais les liens du sous-menu ne sont pas affichés et l'utilisateur ne peut donc pas naviguer vers une autre sous-section. J'ai également utilisé une image d'arrière-plan pour les liens pour éviter le problème d'aliasing associé à l'inclinaison du texte dans IE7. Curieusement, lorsque vous cliquez sur une vignette dans la section des directeurs, le sous-menu listant les directeurs est affiché.
Je pense que cela a quelque chose à voir avec l'ordre d'empilage de l'index z, bien que j'ai assigné des valeurs d'index z à tous les éléments. Le code du menu est le suivant:
--------------- HTML ------------------
<ul id="menu" class="left">
<li id="direct">
<a href="#" id="direct-lnk" onClick="return false;" title="Directors">directors</a>
<ul class="list">
<li id="vishal"><a href="#" id="vishal-lnk" onClick="return false;" title="Vishal Punjabi">vishal punjabi</a></li>
<li id="shiraz"><a href="#" id="shiraz-lnk" onClick="return false;" title="Shiraz Bhattacharya">shiraz bhattacharya</a></li>
<li id="roshan"><a href="#" id="roshan-lnk" onClick="return false;" title="Roshan Shetty">roshan shetty</a></li>
<li id="saurabh"><a href="#" id="saurabh-lnk" onClick="return false;" title="Saurabh Ghosh">saurabh ghosh</a></li>
<li id="mark"><a href="#" id="mark-lnk" onClick="return false;" title="Mark Toia">mark toia</a></li>
<li id="alejandro"><a href="#" id="alejandro-lnk" onClick="return false;" title="Alejandro Toledo">alejandro toledo</a></li>
<li id="claude"><a href="#" id="claude-lnk" onClick="return false;" title="Claude Genton">claude genton</a></li>
<li id="tim"><a href="#" id="tim-lnk" onClick="return false;" title="Tim Gibbs">tim gibbs</a></li>
</ul>
</li>
<li id="about"><a href="#" id="about-lnk" onClick="return false;" title="About us">about us</a></li>
<li id="production">
<a href="#" id="production-lnk" onclick="return false;" title="Production services">production services</a>
<ul class="list">
<li id="locations"><a href="#" id="locations-lnk" onClick="return false;" title="Locations">locations</a></li>
<li id="casting"><a href="#" id="casting-lnk" onClick="return false;" title="Casting">casting</a></li>
<li id="crews"><a href="#" id="crews-lnk" onClick="return false;" title="Crews">crews</a></li>
<li id="equipment"><a href="#" id="equipment-lnk" onClick="return false;" title="Equipment">equipment</a></li>
<li id="post-prod"><a href="#" id="post-prod-lnk" onClick="return false;" title="Post production">post production</a></li>
</ul>
</li>
<li id="get"><a href="#" id="get-lnk" onClick="return false;" title="Get in touch">get in touch</a></li>
</ul>
Ci-dessous le CSS pour IE7
IE7 CSS
#menu{
margin:0 auto;
list-style-type:none;
padding:103px 0 20px 0;
background:url(../img/layout/menu-line.gif) repeat-y 8px 0;
height:auto;
min-height:250px;
max-height:515px;
width:auto;
min-width:180px;
position:relative;
z-index:-1 !important;
}
#menu > li{
margin-left:4px; list-style-type:none;
position:relative;
height:auto; min-height:25px; width:210px;
margin:10px 0;
}
#menu > li > a{
display:block;
width:210px;
height:auto;
overflow:hidden;
background:url(../img/layout/main-link-ie-bg.jpg) no-repeat -3px 0;
font:1.75em/1em "Carbon Block";
letter-spacing:0.015em;
color:#46c5e1;
text-transform:uppercase;
padding-left:20px;
position:absolute;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=- 0.21255656167002124, M22=1, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-0.21255656167002124, M22=1, SizingMethod='auto expand');
}
#menu > li > a:hover{
color:#ff9711;
background:url(../img/layout/main-link-ie-bg.jpg) no-repeat -3px -35px;
}
#menu > li > a.sel{
color:#ff9711; background:url(../img/layout/main-link-ie-bg.jpg) no-repeat -3px -35px;
}
#menu > li > ul{
display:none;
width:auto;
height:auto;
list-style-type:none;
margin:30px 0 10px 20px;
position:relative;
z-index:999;
}
#menu > li > ul > li{
width:200px;
height:20px;
list-style-type:none;
position:relative;
padding-left:40px;
top:0; left:0;
z-index:990;
}
#menu > li > ul > li:hover{
color:#ff9711;
}
#menu > li > ul > li > a{
display:block; /*text-indent:-5000px;*/
z-index:999;
position:absolute; top:0; left:0;
font:1.25em/1em "Carbon Block";
letter-spacing:0.015em; color:#58585a;
background:url('../img/layout/anchor-bg.jpg');
text-transform:uppercase;
height:20px; width:200px; z-index:999 !important;
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-0.21255656167002124, M22=1, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=-0.21255656167002124, M22=1, SizingMethod='auto expand');
}
#menu > li > ul > li > a:hover{
color:#ff9711;
}
#menu > li > ul > li > a.sel{
color:#ff9711;
}
Toute aide à ce serait génial comme je l'ai essayé toutes les possibilités d'obtenir le sous-menu pour afficher dans IE7 et je suis à court d'options. Je peux revenir à l'utilisation des images et éviter le biais, Cufon etc dans son ensemble, mais je ne suis pas sûr si cela va résoudre le problème d'affichage de sous-menu, et ce serait ma dernière option.
En outre, j'utilise < meta http-equiv = "X-UA-Compatible" content = "IE = EmulateIE7"/> afin de forcer IE en mode IE7, si cela fait une différence.
Best, Sagar