【发布时间】：2012-03-12 04:59:54
【问题描述】：
我编写了一个代码，其中包含 jquery 以在单击缩略图时显示 fancybox，以及添加标记以在图像缩略图顶部（图层顶部）显示放大镜标记的 prepend 函数。奇怪的是，当网页在 IE 中呈现时，缩略图似乎“不可点击”（不显示手形光标，也不提供链接功能）因此无法在渲染中显示或运行 fancybox 脚本。其他浏览器如 Firefox、Chrome 可以完美配合这三样东西同时运行。
这是一段html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Private Functions /title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"/>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" media="screen,projection" href="css/ui.totop.css" />
<link rel="stylesheet" href="colorbox.css" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/Proxima_Nova_Rg_400-Proxima_Nova_Rg_700-Proxima_Nova_Rg_italic_400-Proxima_Nova_Rg_italic_700.font.js"></script>
<script type="text/javascript" src="js/BernhardMod_BT_400-BernhardMod_BT_700-BernhardMod_BT_italic_700.font.js"></script>
<script type="text/javascript" src="js/Liberation_Serif_400-Liberation_Serif_700-Liberation_Serif_italic_400-Liberation_Serif_italic_700.font.js"></script>
<script type="text/javascript" src="js/Gotham_Book_325-Gotham_Medium_350-Gotham_Book_italic_325-Gotham_Medium_italic_350.font.js"></script>
<script type="text/javascript" src="js/Gotham_Light_300-Gotham_Bold_400-Gotham_Light_italic_300-Gotham_Bold_italic_400.font.js"></script>
<script type="text/javascript" src="js/Gotham_Thin_250-Gotham_Bold_400-Gotham_Thin_italic_250-Gotham_Bold_italic_400.font.js"></script>
<script type="text/javascript" src="source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css" media="screen" />
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" media="screen,projection" href="css/ie7.css" />
<![endif]-->
<script src="colorbox/jquery.colorbox.js" type="text/javascript"></script>
<!-- easing plugin ( optional ) -->
<script src="js/easing.js" type="text/javascript"></script>
<!-- UItoTop plugin -->
<script src="js/jquery.ui.totop.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('#controls .left, #controls .right, #footer .wrap', { fontFamily: 'Proxima Nova Rg' });
Cufon.replace('#nav2 li, #nav2 li a, .sidebar .menu ul li', { fontFamily: 'Gotham Book' });
Cufon.replace('#nav2 li a.selected', { fontFamily: 'Gotham Medium' });
Cufon.replace('.content h2', { fontFamily: 'Gotham Thin' });
Cufon.replace('.content p', { fontFamily: 'Liberation Serif' });
jQuery(function(){
/*
var defaults = {
containerID: 'moccaUItoTop', // fading element id
containerHoverClass: 'moccaUIhover', // fading element hover class
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$("<span></span").prependTo('.thumbnails a');
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<script type="text/javascript">
$(document).ready(function() {
/*
Simple image gallery. Uses default settings
*/
$(".thumbnails a").fancybox();
});
</script>
</head>
<body>
<div class="content">
<div class="banner"><img src="images/history-banner.jpg" alt="History of 333 Collins Street Melbourne" title="Melbourne's Most Exclusive Address - History"/></div>
<h2>Fusce nisi 333 Collins for your private function</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia dolor orci. Nulla tempus faucibus velit quis euismod. Mauris nec tellus sapien. Nullam bibendum, augue sed eleifend fermentum, neque orci pulvinar nunc, quis laoreet enim arcu ac ipsum.</p>
<p>Sed sit amet lorem ipsum, ac ornare tortor. Donec non mauris consectetur nulla convallis venenatis. Morbi facilisis molestie nisi, et scelerisque arcu pulvinar sit amet. In vehicula eros in nisl dictum iaculis.</p>
<div class="thumbnails">
<a href="gallery/private-functions/private-function-2.jpg" title="Private Function 1"><img src="images/private-function-1.jpg" width="220" height="122" alt="Private Function 1"/></a>
<a href="gallery/private-functions/private-function-1.jpg" title="Private Function 2"><img src="images/private-function-2.jpg" width="220" height="122" alt="Private Function 2"/></a>
<a href="gallery/private-functions/private-function-3.jpg" title="Private Function 3"><img src="images/private-function-3.jpg" width="220" height="122" alt="Private Function 3" class="norightmargin"/></a>
</div>
</div>
</body>
</html>
还有一段css：
/** -----CONTENT --------------------*/
.content { padding-bottom: 3em; float:right; width:703px; height: auto; margin-right: 76px; }
.banner{height:180px; width: 700px; margin-bottom:47px;}
.content h1{margin-bottom:28px; font-size:25pt;color: #000000;}
.content h2{margin-bottom:28px; font-size:25pt;color: #000000;}
.content p{margin-bottom:36px; font-size:13pt; line-height: 25pt;}
.content p cufon{ margin-bottom:7px;}
.content .thumbnails img{
border:none; margin-right:15px; margin-bottom:20px;z-index:-10;
}
.content .thumbnails img.norightmargin{
margin-right: 0px;
}
.content .thumbnails a span{
width:220px; position: absolute;
height: 122px;
}
.content .thumbnails a span:hover{
background: url(images/rollover-magnifier.png) no-repeat;
}
如果有任何推荐的纠正解决方案使图像缩略图可点击以及使用 fancybox 弹出，我将不胜感激。谢谢。
【问题讨论】：
标签： javascript jquery css fancybox href