Jquery 当我在Firefox中查看时，用AJAX加载到div中的fancyBox插件行为怪异

好的，我正在为一个朋友制作一个投资组合网站。相当简单的一个

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css" media="screen" />

<script type="text/javascript">
    $(document).ready(function() {
        /*
            Simple image gallery. Use default settings
        */

        $('.fancybox').fancybox();
            closeClick : true;

        /*
            Different effects
        */

        // Change title type, overlay opening speed and opacity
        $(".fancybox-effects-a").fancybox({
            closeClick : false,

            helpers: {
                title : {
                    type : 'outside'
                },
                overlay : {
                    speedIn : 500,
                    opacity : 0.95
                }
            }
        });

        // Disable opening and closing animations, change title type
        $(".fancybox-effects-b").fancybox({
            openEffect  : 'none',
            closeEffect : 'none',

            helpers : {
                title : {
                    type : 'over'
                }
            }
        });

        // Set custom style, close if clicked, change title type and overlay color
        $(".fancybox-effects-c").fancybox({
            wrapCSS    : 'fancybox-custom',
            closeClick : true,

            helpers : {
                title : {
                    type : 'inside'
                },
                overlay : {
                    css : {
                        'background-color' : '#eee' 
                    }
                }
            }
        });

        // Remove padding, set opening and closing animations, close if clicked and disable overlay
        $(".fancybox-effects-d").fancybox({
            padding: 0,

            openEffect : 'elastic',
            openSpeed  : 150,

            closeEffect : 'elastic',
            closeSpeed  : 150,

            closeClick : true,

            helpers : {
                overlay : null
            }
        });

        /*
            Button helper. Disable animations, hide close button, change title type and content
        */

        $('.fancybox-buttons').fancybox({
            openEffect  : 'none',
            closeEffect : 'none',

            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,

            helpers : {
                title : {
                    type : 'inside'
                },
                buttons : {}
            },

            afterLoad : function() {
                this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
            }
        });


        /*
            Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
        */

        $('.fancybox-thumbs').fancybox({
            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,
            arrows    : false,
            nextClick : true,

            helpers : { 
                thumbs : {
                    width  : 50,
                    height : 50
                }
            }
        });

    });
</script>
<style type="text/css">


    .gallerycontainer li {
        position: relative;
        float:left;
        list-style: none;
        width: 16.6666667%;
        height: 33.3%;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        background: #000000;
    }


    .gallerycontainer li img {
        height: 100%;
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        opacity: 1;
        -webkit-transition: opacity 1s ease-in-out;

    }

    .gallerycontainer li img:hover {
        opacity: 0.30;
        -webkit-transition: opacity 1s ease-in-out;
    }

    .fancybox-effects-a img {
        width: 100%;
        height: 100%;

    }


    ul a                            { text-decoration: none; display: block; }
    ul li img                       { display: block; position: relative; z-index: -1; } /* IE8 fix, background colour appears behind img for uknown reason set negative z-index */
    ul li:not([class=na]) img       { position: static; } /* Reset relative position, as this plays havoc with good browsers */

    ul a:hover:after {
        content: attr(data-title2);
        color: #000;
        position: absolute;
        bottom: 0;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-family: 'Play', sans-serif, 3em;
        width: 95%;
        display: block;
    }

    ul a.fancybox-effects-a:hover:after { top: 50%; margin-top: -15px; }

    .gallerycontainer a:hover:after {
        color: #fff;
        text-shadow: 1px 1px 1px #000;
    }
</style>
    <div class="workajax">  <!-- <div id="logo"></div> -->
    <ul class="gallerycontainer">
<li>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar1_b.jpg" data-fancybox-group="gallery1" data-title2="Caviar" title="">
        <img src="photos/1Caviar/caviar1_s.jpg" alt="" />
    </a>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar2_b.jpg" data-fancybox-group="gallery1" title=""></a>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar3_b.jpg" data-fancybox-group="gallery1" title=""></a>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar4_b.jpg" data-fancybox-group="gallery1" title=""></a>

</li>

我有一个容器div，我使用AJAX将内容页面加载到其中。其中一个是工作页面，我有一个fancybox图库，使用拇指加载相关图片

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css" media="screen" />

<script type="text/javascript">
    $(document).ready(function() {
        /*
            Simple image gallery. Use default settings
        */

        $('.fancybox').fancybox();
            closeClick : true;

        /*
            Different effects
        */

        // Change title type, overlay opening speed and opacity
        $(".fancybox-effects-a").fancybox({
            closeClick : false,

            helpers: {
                title : {
                    type : 'outside'
                },
                overlay : {
                    speedIn : 500,
                    opacity : 0.95
                }
            }
        });

        // Disable opening and closing animations, change title type
        $(".fancybox-effects-b").fancybox({
            openEffect  : 'none',
            closeEffect : 'none',

            helpers : {
                title : {
                    type : 'over'
                }
            }
        });

        // Set custom style, close if clicked, change title type and overlay color
        $(".fancybox-effects-c").fancybox({
            wrapCSS    : 'fancybox-custom',
            closeClick : true,

            helpers : {
                title : {
                    type : 'inside'
                },
                overlay : {
                    css : {
                        'background-color' : '#eee' 
                    }
                }
            }
        });

        // Remove padding, set opening and closing animations, close if clicked and disable overlay
        $(".fancybox-effects-d").fancybox({
            padding: 0,

            openEffect : 'elastic',
            openSpeed  : 150,

            closeEffect : 'elastic',
            closeSpeed  : 150,

            closeClick : true,

            helpers : {
                overlay : null
            }
        });

        /*
            Button helper. Disable animations, hide close button, change title type and content
        */

        $('.fancybox-buttons').fancybox({
            openEffect  : 'none',
            closeEffect : 'none',

            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,

            helpers : {
                title : {
                    type : 'inside'
                },
                buttons : {}
            },

            afterLoad : function() {
                this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
            }
        });


        /*
            Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
        */

        $('.fancybox-thumbs').fancybox({
            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,
            arrows    : false,
            nextClick : true,

            helpers : { 
                thumbs : {
                    width  : 50,
                    height : 50
                }
            }
        });

    });
</script>
<style type="text/css">


    .gallerycontainer li {
        position: relative;
        float:left;
        list-style: none;
        width: 16.6666667%;
        height: 33.3%;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        background: #000000;
    }


    .gallerycontainer li img {
        height: 100%;
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        opacity: 1;
        -webkit-transition: opacity 1s ease-in-out;

    }

    .gallerycontainer li img:hover {
        opacity: 0.30;
        -webkit-transition: opacity 1s ease-in-out;
    }

    .fancybox-effects-a img {
        width: 100%;
        height: 100%;

    }


    ul a                            { text-decoration: none; display: block; }
    ul li img                       { display: block; position: relative; z-index: -1; } /* IE8 fix, background colour appears behind img for uknown reason set negative z-index */
    ul li:not([class=na]) img       { position: static; } /* Reset relative position, as this plays havoc with good browsers */

    ul a:hover:after {
        content: attr(data-title2);
        color: #000;
        position: absolute;
        bottom: 0;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-family: 'Play', sans-serif, 3em;
        width: 95%;
        display: block;
    }

    ul a.fancybox-effects-a:hover:after { top: 50%; margin-top: -15px; }

    .gallerycontainer a:hover:after {
        color: #fff;
        text-shadow: 1px 1px 1px #000;
    }
</style>
    <div class="workajax">  <!-- <div id="logo"></div> -->
    <ul class="gallerycontainer">
<li>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar1_b.jpg" data-fancybox-group="gallery1" data-title2="Caviar" title="">
        <img src="photos/1Caviar/caviar1_s.jpg" alt="" />
    </a>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar2_b.jpg" data-fancybox-group="gallery1" title=""></a>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar3_b.jpg" data-fancybox-group="gallery1" title=""></a>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar4_b.jpg" data-fancybox-group="gallery1" title=""></a>

</li>

现在，这在Chrome和Safari等浏览器中运行得非常好，但在Firefox中，拇指的布局完全失控，无法保持在指定的位置。我不知道为什么

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css" media="screen" />

<script type="text/javascript">
    $(document).ready(function() {
        /*
            Simple image gallery. Use default settings
        */

        $('.fancybox').fancybox();
            closeClick : true;

        /*
            Different effects
        */

        // Change title type, overlay opening speed and opacity
        $(".fancybox-effects-a").fancybox({
            closeClick : false,

            helpers: {
                title : {
                    type : 'outside'
                },
                overlay : {
                    speedIn : 500,
                    opacity : 0.95
                }
            }
        });

        // Disable opening and closing animations, change title type
        $(".fancybox-effects-b").fancybox({
            openEffect  : 'none',
            closeEffect : 'none',

            helpers : {
                title : {
                    type : 'over'
                }
            }
        });

        // Set custom style, close if clicked, change title type and overlay color
        $(".fancybox-effects-c").fancybox({
            wrapCSS    : 'fancybox-custom',
            closeClick : true,

            helpers : {
                title : {
                    type : 'inside'
                },
                overlay : {
                    css : {
                        'background-color' : '#eee' 
                    }
                }
            }
        });

        // Remove padding, set opening and closing animations, close if clicked and disable overlay
        $(".fancybox-effects-d").fancybox({
            padding: 0,

            openEffect : 'elastic',
            openSpeed  : 150,

            closeEffect : 'elastic',
            closeSpeed  : 150,

            closeClick : true,

            helpers : {
                overlay : null
            }
        });

        /*
            Button helper. Disable animations, hide close button, change title type and content
        */

        $('.fancybox-buttons').fancybox({
            openEffect  : 'none',
            closeEffect : 'none',

            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,

            helpers : {
                title : {
                    type : 'inside'
                },
                buttons : {}
            },

            afterLoad : function() {
                this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
            }
        });


        /*
            Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
        */

        $('.fancybox-thumbs').fancybox({
            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,
            arrows    : false,
            nextClick : true,

            helpers : { 
                thumbs : {
                    width  : 50,
                    height : 50
                }
            }
        });

    });
</script>
<style type="text/css">


    .gallerycontainer li {
        position: relative;
        float:left;
        list-style: none;
        width: 16.6666667%;
        height: 33.3%;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        background: #000000;
    }


    .gallerycontainer li img {
        height: 100%;
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        opacity: 1;
        -webkit-transition: opacity 1s ease-in-out;

    }

    .gallerycontainer li img:hover {
        opacity: 0.30;
        -webkit-transition: opacity 1s ease-in-out;
    }

    .fancybox-effects-a img {
        width: 100%;
        height: 100%;

    }


    ul a                            { text-decoration: none; display: block; }
    ul li img                       { display: block; position: relative; z-index: -1; } /* IE8 fix, background colour appears behind img for uknown reason set negative z-index */
    ul li:not([class=na]) img       { position: static; } /* Reset relative position, as this plays havoc with good browsers */

    ul a:hover:after {
        content: attr(data-title2);
        color: #000;
        position: absolute;
        bottom: 0;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-family: 'Play', sans-serif, 3em;
        width: 95%;
        display: block;
    }

    ul a.fancybox-effects-a:hover:after { top: 50%; margin-top: -15px; }

    .gallerycontainer a:hover:after {
        color: #fff;
        text-shadow: 1px 1px 1px #000;
    }
</style>
    <div class="workajax">  <!-- <div id="logo"></div> -->
    <ul class="gallerycontainer">
<li>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar1_b.jpg" data-fancybox-group="gallery1" data-title2="Caviar" title="">
        <img src="photos/1Caviar/caviar1_s.jpg" alt="" />
    </a>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar2_b.jpg" data-fancybox-group="gallery1" title=""></a>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar3_b.jpg" data-fancybox-group="gallery1" title=""></a>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar4_b.jpg" data-fancybox-group="gallery1" title=""></a>

</li>

以下是我的ajax代码：

$(document).ready(function(){ 
$.ajax({
    url: "workajax.html",
    cache: false,
    success: function(html){
        $(".container").empty();
        $(".container").append(html);
        $('.workajax').fadeIn(1200);
    }
});

$("#link2").click(function() {
    $.ajax({
        url: "workajax.html",
        cache: false,
        success: function(html){

            $(".container").empty();
            $(".container").append(html);
            $('.workajax').fadeIn(1200);

        }
    });
});


$("#link3").click(function() {
    $.ajax({
        url: "aboutajax.html",
        cache: false,
        success: function(html){
            $(".container").empty();
            $(".container").append(html);
            $('.aboutajax').fadeIn(1200);
        }
    });
}); 

$("#link5").click(function() {
    $.ajax({
        url: "contactajax.html",
        cache: false,
        success: function(html){
            $(".container").empty();
            $(".container").append(html);
            $('.contact').fadeIn(1200);
        }
    });
}); 

});

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css" media="screen" />

<script type="text/javascript">
    $(document).ready(function() {
        /*
            Simple image gallery. Use default settings
        */

        $('.fancybox').fancybox();
            closeClick : true;

        /*
            Different effects
        */

        // Change title type, overlay opening speed and opacity
        $(".fancybox-effects-a").fancybox({
            closeClick : false,

            helpers: {
                title : {
                    type : 'outside'
                },
                overlay : {
                    speedIn : 500,
                    opacity : 0.95
                }
            }
        });

        // Disable opening and closing animations, change title type
        $(".fancybox-effects-b").fancybox({
            openEffect  : 'none',
            closeEffect : 'none',

            helpers : {
                title : {
                    type : 'over'
                }
            }
        });

        // Set custom style, close if clicked, change title type and overlay color
        $(".fancybox-effects-c").fancybox({
            wrapCSS    : 'fancybox-custom',
            closeClick : true,

            helpers : {
                title : {
                    type : 'inside'
                },
                overlay : {
                    css : {
                        'background-color' : '#eee' 
                    }
                }
            }
        });

        // Remove padding, set opening and closing animations, close if clicked and disable overlay
        $(".fancybox-effects-d").fancybox({
            padding: 0,

            openEffect : 'elastic',
            openSpeed  : 150,

            closeEffect : 'elastic',
            closeSpeed  : 150,

            closeClick : true,

            helpers : {
                overlay : null
            }
        });

        /*
            Button helper. Disable animations, hide close button, change title type and content
        */

        $('.fancybox-buttons').fancybox({
            openEffect  : 'none',
            closeEffect : 'none',

            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,

            helpers : {
                title : {
                    type : 'inside'
                },
                buttons : {}
            },

            afterLoad : function() {
                this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
            }
        });


        /*
            Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
        */

        $('.fancybox-thumbs').fancybox({
            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,
            arrows    : false,
            nextClick : true,

            helpers : { 
                thumbs : {
                    width  : 50,
                    height : 50
                }
            }
        });

    });
</script>
<style type="text/css">


    .gallerycontainer li {
        position: relative;
        float:left;
        list-style: none;
        width: 16.6666667%;
        height: 33.3%;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        background: #000000;
    }


    .gallerycontainer li img {
        height: 100%;
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        opacity: 1;
        -webkit-transition: opacity 1s ease-in-out;

    }

    .gallerycontainer li img:hover {
        opacity: 0.30;
        -webkit-transition: opacity 1s ease-in-out;
    }

    .fancybox-effects-a img {
        width: 100%;
        height: 100%;

    }


    ul a                            { text-decoration: none; display: block; }
    ul li img                       { display: block; position: relative; z-index: -1; } /* IE8 fix, background colour appears behind img for uknown reason set negative z-index */
    ul li:not([class=na]) img       { position: static; } /* Reset relative position, as this plays havoc with good browsers */

    ul a:hover:after {
        content: attr(data-title2);
        color: #000;
        position: absolute;
        bottom: 0;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-family: 'Play', sans-serif, 3em;
        width: 95%;
        display: block;
    }

    ul a.fancybox-effects-a:hover:after { top: 50%; margin-top: -15px; }

    .gallerycontainer a:hover:after {
        color: #fff;
        text-shadow: 1px 1px 1px #000;
    }
</style>
    <div class="workajax">  <!-- <div id="logo"></div> -->
    <ul class="gallerycontainer">
<li>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar1_b.jpg" data-fancybox-group="gallery1" data-title2="Caviar" title="">
        <img src="photos/1Caviar/caviar1_s.jpg" alt="" />
    </a>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar2_b.jpg" data-fancybox-group="gallery1" title=""></a>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar3_b.jpg" data-fancybox-group="gallery1" title=""></a>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar4_b.jpg" data-fancybox-group="gallery1" title=""></a>

</li>

这是我的工作页代码：（不包括所有html库）

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css" media="screen" />

<script type="text/javascript">
    $(document).ready(function() {
        /*
            Simple image gallery. Use default settings
        */

        $('.fancybox').fancybox();
            closeClick : true;

        /*
            Different effects
        */

        // Change title type, overlay opening speed and opacity
        $(".fancybox-effects-a").fancybox({
            closeClick : false,

            helpers: {
                title : {
                    type : 'outside'
                },
                overlay : {
                    speedIn : 500,
                    opacity : 0.95
                }
            }
        });

        // Disable opening and closing animations, change title type
        $(".fancybox-effects-b").fancybox({
            openEffect  : 'none',
            closeEffect : 'none',

            helpers : {
                title : {
                    type : 'over'
                }
            }
        });

        // Set custom style, close if clicked, change title type and overlay color
        $(".fancybox-effects-c").fancybox({
            wrapCSS    : 'fancybox-custom',
            closeClick : true,

            helpers : {
                title : {
                    type : 'inside'
                },
                overlay : {
                    css : {
                        'background-color' : '#eee' 
                    }
                }
            }
        });

        // Remove padding, set opening and closing animations, close if clicked and disable overlay
        $(".fancybox-effects-d").fancybox({
            padding: 0,

            openEffect : 'elastic',
            openSpeed  : 150,

            closeEffect : 'elastic',
            closeSpeed  : 150,

            closeClick : true,

            helpers : {
                overlay : null
            }
        });

        /*
            Button helper. Disable animations, hide close button, change title type and content
        */

        $('.fancybox-buttons').fancybox({
            openEffect  : 'none',
            closeEffect : 'none',

            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,

            helpers : {
                title : {
                    type : 'inside'
                },
                buttons : {}
            },

            afterLoad : function() {
                this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
            }
        });


        /*
            Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
        */

        $('.fancybox-thumbs').fancybox({
            prevEffect : 'none',
            nextEffect : 'none',

            closeBtn  : false,
            arrows    : false,
            nextClick : true,

            helpers : { 
                thumbs : {
                    width  : 50,
                    height : 50
                }
            }
        });

    });
</script>
<style type="text/css">


    .gallerycontainer li {
        position: relative;
        float:left;
        list-style: none;
        width: 16.6666667%;
        height: 33.3%;
        margin: 0 0 0 0;
        padding: 0 0 0 0;
        background: #000000;
    }


    .gallerycontainer li img {
        height: 100%;
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 0px;
        padding-bottom: 0px;
        opacity: 1;
        -webkit-transition: opacity 1s ease-in-out;

    }

    .gallerycontainer li img:hover {
        opacity: 0.30;
        -webkit-transition: opacity 1s ease-in-out;
    }

    .fancybox-effects-a img {
        width: 100%;
        height: 100%;

    }


    ul a                            { text-decoration: none; display: block; }
    ul li img                       { display: block; position: relative; z-index: -1; } /* IE8 fix, background colour appears behind img for uknown reason set negative z-index */
    ul li:not([class=na]) img       { position: static; } /* Reset relative position, as this plays havoc with good browsers */

    ul a:hover:after {
        content: attr(data-title2);
        color: #000;
        position: absolute;
        bottom: 0;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-family: 'Play', sans-serif, 3em;
        width: 95%;
        display: block;
    }

    ul a.fancybox-effects-a:hover:after { top: 50%; margin-top: -15px; }

    .gallerycontainer a:hover:after {
        color: #fff;
        text-shadow: 1px 1px 1px #000;
    }
</style>
    <div class="workajax">  <!-- <div id="logo"></div> -->
    <ul class="gallerycontainer">
<li>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar1_b.jpg" data-fancybox-group="gallery1" data-title2="Caviar" title="">
        <img src="photos/1Caviar/caviar1_s.jpg" alt="" />
    </a>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar2_b.jpg" data-fancybox-group="gallery1" title=""></a>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar3_b.jpg" data-fancybox-group="gallery1" title=""></a>
    <a class="fancybox-effects-a" href="photos/1Caviar/caviar4_b.jpg" data-fancybox-group="gallery1" title=""></a>

</li>

$（文档）.ready（函数（）{
/*
简单图像库。使用默认设置
*/
$（'.fancybox'）.fancybox（）；
closeClick：true；
/*
不同效果
*/
//更改标题类型、覆盖打开速度和不透明度
$（“.fancybox-effects-a”）.fancybox({
closeClick:false，
助手：{
标题：{
类型：“外部”
},
覆盖：{
speedIn:500，
不透明度：0.95
}
}
});
//禁用打开和关闭动画，更改标题类型
$（“.fancybox-effects-b”）.fancybox({
openEffect:'无'，
closeEffect:'无'，
助手：{
标题：{
键入：“结束”
}
}
});
//设置自定义样式，单击后关闭，更改标题类型和覆盖颜色
$（“.fancybox-effects-c”）.fancybox({
wrapCSS:“fancybox定制”，
closeClick:true，
助手：{
标题：{
类型：“内部”
},
覆盖：{
css:{
“背景色”：“eee”
}
}
}
});
//删除填充，设置打开和关闭动画，单击后关闭并禁用覆盖
$（“.fancybox-effects-d”）.fancybox({
填充：0，
openEffect:'弹性'，
开放速度：150，
闭合效应：“弹性”，
接近速度：150，
closeClick:true，
助手：{
覆盖：空
}
});
/*
按钮助手。禁用动画，隐藏关闭按钮，更改标题类型和内容
*/
$（'.fancybox按钮'）.fancybox({
openEffect:'无'，
closeEffect:'无'，
效果：“无”，
下一个效果：“无”，
closeBtn:false，
助手：{
标题：{
类型：“内部”
},
按钮：{}
},
后加载：函数（）{
this.title='Image'+（this.index+1）+'of'+this.group.length+（this.title？'-'+this.title:''）；
}
});
/*
缩略图帮助程序。禁用动画、隐藏关闭按钮、箭头，并在单击时滑动到下一个库项目
*/
$（'.fancybox拇指'）。fancybox({
效果：“无”，
下一个效果：“无”，
closeBtn:false，
箭头：错，
下一步：没错，
助手：{
拇指：{
宽度：50，
身高：50
}
}
});
});
李先生{
位置：相对位置；
浮动：左；
列表样式：无；
宽度：16.66667%；
身高：33.3%；
保证金：0；
填充：0；
背景：#000000；
}
.gallerycontainer li img{
身高：100%；
边际上限：0px；
边缘底部：0px；
填充顶部：0px；
垫底：0px；
不透明度：1；
-webkit转换：不透明度1s易入易出；
}
.gallerycontainer li图像：悬停{
不透明度：0.30；
-webkit转换：不透明度1s易入易出；
}
.fancybox-effects-a img{
宽度：100%；
身高：100%；
}
ul a{文本装饰：无；显示：块；}
ul li img{显示：块；位置：相对；z索引：-1；}/*IE8固定，背景色显示在img后面，用于uknown原因集负z索引*/
ulli:not（[class=na]）img{position:static；}/*Reset relative position，因为这会严重破坏好的浏览器*/
ul a：悬停：之后{
内容：attr（数据标题2）；
颜色：#000；
位置：绝对位置；
底部：0；
高度：30px；
线高：30px；
文本对齐：居中；
字体系列：“播放”，无衬线，3em；
宽度：95%；
显示：块；
}
ul a.fancybox-effects-a：悬停：在{顶部：50%；页边顶部：-15px；}
.gallerycontainer a:悬停：之后{
颜色：#fff；
文本阴影：1px 1px 1px#000；
}

这似乎是一个

css

问题（与fancybox和ajax无关）。页面中的缩略图完全独立于FancyBox，似乎你是对的。但我还是不知道会发生什么。可能是因为我用作div容器的列表项使用的是百分比吗？（gallerycontainer li）在某个地方读到firefox可能在宽度百分比方面有问题？我打赌你在pxs中固定的

宽度
和
高度
问题会少一些，因为大多数浏览器都会呈现相同的效果。我不认为firefox在宽度百分比方面存在问题，但在这种情况下，您的应用程序正在浮动这些元素（而浮动是很棘手的）。别忘了登广告