问题描述
|
我已经花了几个小时,但我终生无法弄清为什么jQuery IE6悬停修复程序(http://plugins.jquery.com/project/ie6hover)无法正常工作。另外,也许无关,但我似乎无法获得http://www.dillerdesign.com/experiment/DD_belatedPNG/或就此而言,任何适用于Shopify网站的IE6黑客。任何建议都会被珍惜。这是我的代码的相关输出部分(在Shopify完成其工作后):
<head>
<link href=\"http://cdn.shopify.com/s/files/1/0070/7142/t/1/assets/stylesheet.css?122494\" rel=\"stylesheet\" type=\"text/css\" media=\"all\" />
<script src=\"http://cdn.shopify.com/s/files/1/0070/7142/t/1/assets/jquery-1.5.2.min.js?122494\" type=\"text/javascript\"></script>
<!--[if IE 6]>
<script src=\"http://cdn.shopify.com/s/files/1/0070/7142/t/1/assets/DD_belatedPNG.js?122494\" type=\"text/javascript\"></script>
<script>
DD_belatedPNG.fix(\'.pngy\');
</script>
<script src=\"http://cdn.shopify.com/s/files/1/0070/7142/t/1/assets/jquery.ie6hover.js?122494\" type=\"text/javascript\"></script>
<script type=\"text/javascript\">
$.ie6hover(true);
</script>
<![endif]-->
</head
<body>
<a href=\"/\"><img class=\"pngy\" src=\"http://cdn.shopify.com/s/files/1/0070/7142/t/1/assets/alternative-radio-logo.png?122494\" width=\"379\" height=\"80\" /></a>
<ul>
<li >
<a href=\"/collections/all-programs\" class=\"strong-link\">Programs</a>
<ul class=\"sub-navigation\">
<li><a href=\"/collections/latest-programs\">Latest Programs</a></li>
<li><a href=\"/collections/staff-favorites\">Staff Favorites</a></li>
<li><a href=\"/collections/subscriptions\">Season Subscriptions</a></li>
<li><a href=\"/collections/all-programs\">All Programs</a></li>
</ul>
</li>
<li >
<a href=\"/pages/speakers\" class=\"strong-link\">Speakers</a>
</li>
<li >
<a href=\"/pages/podcast\" class=\"strong-link\">Podcast</a>
</li>
<li >
<a href=\"/pages/affiliates\" class=\"strong-link\">Stations</a>
<ul class=\"sub-navigation\">
<li><a href=\"/pages/affiliates\">Affiliate Stations</a></li>
<li><a href=\"/blogs/news-for-affiliates\">News for Affiliates</a></li>
</ul>
</li>
<li >
<a href=\"/pages/about-ar\">About</a>
</li>
<li >
<a href=\"/blogs/news-updates\">News Updates</a>
</li>
<li >
<a href=\"/pages/about-barsamian\">Barsamian</a>
</li>
<li class=\"last\" >
<a href=\"/pages/contact\">Contact</a>
</li>
<div class=\"clear\"></div>
</ul>
</body>
这是来自stylesheet.css的相关CSS(我已经取出颜色,字体样式,填充和阴影):
div#navigation ul {
float: left;
z-index: 10;
}
div#navigation ul li {
display: block;
float:left;
}
li:hover ul,li.over ul {
display: block;
}
div#navigation ul li a {
display:block;
}
div#navigation ul li ul.sub-navigation {
display:none;
width:180px;
}
div#navigation ul li:hover ul.sub-navigation {
display:block;
position:absolute;
}
div#navigation ul li:hover ul.sub-navigation li {
width:100%;
}
解决方法
对于您的悬停问题,
我不确定jQuery插件是否可以解决此问题,但是在IE6中,您不能将:hover放在\'a \'之外的任何东西上,而将其放在\'li \'上。如果那是该插件所修复的,那么我的评论是无用的。