JQuery FancyBox、Prepend函数和<a href>标签在IE7和IE8中不起作用.(其他浏

JQuery FancyBox, Prepend function and <a href> tag does not work in IE 7 and 8..(other browsers work ok functionally)

本文关键字：IE8 IE7 不起作用标签其他 href Prepend FancyBox 函数 lt JQuery 更新时间：2023-09-26

我写了一个代码，其中包括当点击缩略图时显示fancybox的jquery，以及添加标签以在图像缩略图顶部（层顶部）显示放大镜标签的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。谢谢

我怀疑css的这一部分正在创建冲突

.content .thumbnails a span{
        width:220px; position: absolute;
        height: 122px;
    }

看起来锚落在绝对定位的"预处理"span 之后

例如，如果你有类似的东西

.content .thumbnails a {
        width:240px;
    }

你会看到只有锚的最后20像素是可以点击的。当然，我们在这里谈论IE。