JQuery FancyBox、Prepend function和<a href> tag在IE 7和8中不起作用..(其他浏览器功能正常)
JQuery FancyBox、Prepend function和<a href> tag在IE 7和8中不起作用..(其他浏览器功能正常)
提问于 2012-03-11 21:58:35
我已经写了一段代码，其中包括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弹出，我将不胜感激。谢谢。
回答 1
Stack Overflow用户
发布于 2012-03-12 04:59:54
我怀疑你的css的这一部分造成了冲突
.content .thumbnails a span{
width:220px; position: absolute;
height: 122px;
}看起来锚点落后于绝对定位的“前置”span。
例如，如果你有像这样的东西
.content .thumbnails a {
width:240px;
}你会发现只有最后20px的锚点是可点击的。当然，我们在这里讨论的是IE。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9655538
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号