Плагин fancyBox, загруженный в div с AJAX, ведет себя странно, когда я смотрю в Firefox

Question

Хорошо, я делаю сайт для портфолио для друга.Довольно простой.У меня есть контейнер div, в который я загружаю контент-страницы, используя AJAX.Одной из них является рабочая страница, где у меня есть галерея fancybox с использованием больших пальцев, которая загружает связанные изображения.Теперь это прекрасно работает в браузерах, таких как Chrome и Safari, но в Firefox расположение больших пальцев полностью выходит из-под контроля и не остается в пределах назначенных им позиций.И я понятия не имею, почему ..

вот мой код 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);
        }
    });
}); 

});

И вот код моей рабочей страницы: (не включает все галереи 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>