Twitter bootstrap 引导转盘和firefox

我最近创建了一个引导旋转木马来显示一系列图像。它可以在IE和Chrome上完美工作。然而，它在Firefox中有点不稳定。由于这必须是响应性的，我只使用了一组图像并制作了不同的版本

对于我的桌面，我有一个缩略图大小/格式的滑块。单击图像时，会弹出一个模式窗口，图像会扩展到更大的尺寸

对于移动版本，我没有使用模式窗口。每张图片都有手机和幻灯片的宽度

对于平板电脑，每张幻灯片有三张图像

在我的mediar查询中，我会根据设备分辨率使用“显示”隐藏或显示不同的版本

然而，FireFox的问题是，当滑块转换到下一张幻灯片时，图像首先快速展开，然后又回到我为任何特定版本设置的大小。我真的不想根据版本调整图像大小，只是为了保持一切简单

我想知道是否有人知道如何解决这个问题。如有任何建议，将不胜感激

露西

<style>
    .imgThumbnail
    {
        height: 100px;
    }
    #imageCarouselNormal
    {
        max-width: 250px;
        margin: 0 auto;
    }

    .imgBg
    {
        box-shadow: 10px 10px 10px #636466;
    }

    .mobileImages
    {
        max-width: 250px;
        margin: 0 auto;
    }

    #imageCarouselLarge
    {
        margin: 0 auto;
        max-width: 250px;
    }



    #modalWindow
    {
        margin: 0 auto;
        padding: 0px;
    }

    .fullSize
    {
        width: 300px !important;
    }

    .carousel
    {
        display: block;
    }

    .productImages
    {
        color: Blue;
        margin-top: 100px;
    }

    .carousel-indicators li
    {
        color: Red !important;
        bottom: 5%;
    }

    .arrows
    {
        color: #1A3E6F;
        margin-top: 30px;
    }

    .largeArrows
    {
        color: black;
        margin-top: 150px;
        font-size: 36px;
    }

    .imgCaption
    {
        border: 1px solid white;
        padding: 5px;
        color: black;
        font-size: 14px;
        font-family: "open Sans regular";
        margin: 20px;
    }

    .indicatorBox
    {
        border: 1px solid white;
        padding: 5px;
        background-color: Black;
    }

    .borderTest
    {
        border: 1px solid black;
    }

    .carousel-inner > .item > img .largeImgSlider
    {
        margin: 0 auto !important;
        max-width: 200px;
    }

    .transparentBG.modal-content
    {
        background: transparent;
    }

    #myModal .modal-dialog
    {
        width: 500px;
    }

    #modal-bg
    {
    }

    #normalViewSlider
    {
        display: block;
    }

    #mobileView
    {
        display: none;
    }

    .sliderName
    {
        color: #1A3E6F;
        font-size: 16px;
        font-family: "Open Sans semibold";
        margin-top: -20px;
    }

    .tabletView
    {
        display: none;
    }

    #testClassImg
    {
        background-image: url("http://betarome.mhs.com/Portals/1/DNNGallery/uploads/2015/7/29/Conners3_1.png");
        width: 500px;
        background-repeat: none;
    }
    .carousel-control.left
    {
        background-image: none !important;
    }
    .carousel-control.right
    {
        background-image: none !important;
    }

    .but-pos
    {
        position: absolute;
        bottom: -50px;
        right: -50px;
        width: 100px;
        height: 100px;
        cursor: pointer;
        z-index: 8040;
    }




    @media (max-width: 1024px)
    {

        #normalViewSlider
        {
            display: none;
        }

        #mobileView
        {
            display: none;
        }

        .tabletView
        {
            display: block !important;
            max-width: 800px;
            margin: 0 auto;
        }

    }

    @media (max-width: 667px)
    {

        #normalViewSlider
        {
            display: none;
        }
        #mobileView
        {
            display: none !important;
        }

        .tabletView
        {
            display: block;
        }

    }




    @media (max-width: 320px)
    {

        #normalViewSlider
        {
            display: none !important;
        }

        #mobileView
        {
            display: block !important;
        }

        .tabletView
        {
            display: none !important;
        }

        #mobileViewSlider
        {
            display: block !important;
        }

    }

    @media (max-width: 480px)
    {

        #normalViewSlider
        {
            display: none;
        }
        #mobileView
        {
            display: block;
        }

        .tabletView
        {
            display: none !important;
        }


    }
</style>
<br />
<!--Start of the Desktop version of the slider-->
<div id="normalViewSlider">
    <div class="carousel slide" id="imageCarouselNormal">
        <div class="carousel-inner text-center">
            <div class="item active row text-center">
                <div class="col-md-4 col-xs-4">
                    <a data-toggle="modal" data-target="#myModal">
                        <img src=""
                            title="Conners 3 Manual Cover" class="img1" onclick="test(event)" id="slider_cover_thumb" /></a></div>
                <div class="col-md-4 col-xs-4">
                    <a data-toggle="modal" data-target="#myModal">
                        <img src=""
                            onclick="test(event)" class="img2" title="Software Iamge" id="slider_softwareImg" /></a></div>
                <div class="col-md-4 col-xs-4">
                    <a data-toggle="modal" data-target="#myModal">
                        <img src=""
                            class="img3" onclick="test(event)" id="slider_CD" title="CD" /></a></div>
            </div>
            <div class="item row text-center">
                <div class="col-md-4 col-xs-4">
                    <a data-toggle="modal" data-target="#myModal">
                        <img src=""
                            class="img4" onclick="test(event)" title="Conners 3 Sample Report. Visit info.mhs.com/Conners3 to request a full sample report"
                            id="slider_report" /></a></div>
                <div class="col-md-4 col-xs-4">
                    <a data-toggle="modal" data-target="#myModal">
                        <img src=""
                            class="img5" onclick="test(event)" title="Handscored available with MHS QuikScore"
                            id="slider_paperForm" /></a></div>
            </div>
        </div>
        <!--
    <ol class="carousel-indicators productImages">
        <li class="active" data-slide-to="0" data-target="#imageCarousel"> </li>
        <li data-slide-to="1" data-target="#imageCarousel"> </li>
        <li data-slide-to="2" data-target="#imageCarousel"> </li>
        <li data-slide-to="3" data-target="#imageCarousel"> </li>
        <li data-slide-to="4" data-target="#imageCarousel"> </li>

    </ol>-->
        <a data-slide="prev" href="#imageCarouselNormal" class="left carousel-control"><i
            class="fa fa-caret-left arrows"></i></a><a data-slide="next" href="#imageCarouselNormal"
                class="right carousel-control"><i class="fa fa-caret-right arrows"></i></a>
    </div>
    <!--When click on the image, a modal window was triggered-->
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content" id="modal-bg" style="border: 1px solid  #1A3E6F;">
                <div class="modal-header" style="background-color: #1A3E6F;">
                    <button type="button but-pos" class="close" data-dismiss="modal" aria-label="Close">
                        <i class="fa fa-times-circle" style="color: white !important;"></i>
                    </button>
                    <h4 style="color: White;">
                        Conners 3rd Edition</h4>
                </div>
                <div class="modal-body">
                    <div class="carousel slide text-center" id="imageCarouselLarge">
                        <div class="carousel-inner text-center" id="modalWindow">
                            <div class="item img1 row text-center">
                                <div class="col-md-12 text-center">
                                    <img src=""
                                        class="largeImgSlider img-responsive slider_cover" /><br />
                                    <div class="imgCaption">
                                        <p>
                                            Conners 3 Manual Cover</p>
                                    </div>
                                </div>
                            </div>
                            <div class="item img2 row">
                                <div class="col-md-12 text-center">
                                    <img src="" />
                                    <br />
                                    <div class="imgCaption">
                                        <p>
                                            Software Image</p>
                                    </div>
                                </div>
                            </div>
                            <div class="item img3 row">
                                <div class="col-md-12 text-center ">
                                    <img src="" />
                                    <br />
                                    <div class="imgCaption">
                                        <p>
                                            Conners 3 Sample Report. Visit info.mhs.com/Conners3 to request a full sample report</p>
                                    </div>
                                </div>
                            </div>
                            <div class="item img4 row">
                                <div class="col-md-12 text-center ">
                                    <img src="" />
                                    <br />
                                    <div class="imgCaption">
                                        <p>
                                            CD</p>
                                    </div>
                                </div>
                            </div>
                            <div class="item img5 row">
                                <div class="col-md-12 text-center ">
                                    <img src="" />
                                    <br />
                                    <div class="imgCaption">
                                        <p>
                                            Handscored available with MHS QuickScore</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--
    <ol class="carousel-indicators productImages">
        <li class="active" data-slide-to="0" data-target="#imageCarouselLarge"> </li>
        <li data-slide-to="1" data-target="#imageCarouselLarge"> </li>
        <li data-slide-to="2" data-target="#imageCarouselLarge"> </li>
        <li data-slide-to="3" data-target="#imageCarouselLarge"> </li>
        <li data-slide-to="4" data-target="#imageCarouselLarge"> </li>
    </ol>
    -->
                    </div>
                    <div class="row">
                        <a data-slide="prev" href="#imageCarouselLarge" class="left carousel-control"><i
                            class="fa fa-caret-left largeArrows"></i></a><a data-slide="next" href="#imageCarouselLarge"
                                class="right carousel-control"><i class="fa fa-caret-right largeArrows"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--End of the Desktop version of the slider-->
<!--Start of the mobile version of the slider-->
<div id="mobileView">
    <%--<div class="row">
    <div class="col-md-12 text-center"><h4 class="sliderName">Product Images</h4><br /></div>
</div>--%>
    <div id="mobileViewSlider" class="carousel slide mobileImages" data-ride="carousel">
        <div class="carousel-inner text-center">
            <div class="item active row">
                <img src=""
                    class="largeImgSlider img-responsive slider_cover" />
                <%-- <div class="row">
            <div class="col-md-12 text-center"><h4 class="sliderName">Cover</h4><br /></div>
         </div>--%>
            </div>
            <div class="item row">
                <img src="" />
                <%--<div class="row">
            <div class="col-md-12 text-center"><h4 class="sliderName">Software Image</h4><br /></div>
         </div>--%>
            </div>
            <div class="item row">
                <img src="" />
                <%-- <div class="row">
            <div class="col-md-12 text-center"><h4 class="sliderName">Sample Report</h4><br /></div>
         </div>--%>
            </div>
            <div class="item row">
                <img src="" />
                <%--<div class="row">
            <div class="col-md-12 text-center"><h4 class="sliderName">CD</h4><br /></div>
         </div>--%>
            </div>
            <div class="item row">
                <img src="" />
                <%-- <div class="row">
            <div class="col-md-12 text-center"><h4 class="sliderName">Handscored available with MHS QuickScore</h4><br /></div>
         </div>--%>
            </div>
        </div>
        <%-- <div class="indicatorBox">--%>
        <ol class="carousel-indicators" style="background-color: Black; border: 1px solid white;">
            <li data-target="#mobileViewSlider" data-slide-to="0" class="active"></li>
            <li data-target="#mobileViewSlider" data-slide-to="1"></li>
            <li data-target="#mobileViewSlider" data-slide-to="2"></li>
            <li data-target="#mobileViewSlider" data-slide-to="3"></li>
            <li data-target="#mobileViewSlider" data-slide-to="4"></li>
        </ol>
        <%-- </div>--%>
    </div>
    <div class="row">
        <a data-slide="prev" href="#mobileViewSlider" class="left carousel-control"><i class="fa fa-caret-left largeArrows">
        </i></a><a data-slide="next" href="#mobileViewSlider" class="right carousel-control">
            <i class="fa fa-caret-right largeArrows"></i></a>
    </div>
</div>
<!--End of the mobile version of the slider-->
<!--Start of the tablet version of the slider-->
<div class="tabletView">
    <div class="carousel slide" id="tabletSlider">
        <div class="carousel-inner text-center">
            <div class="item active row text-center">
                <div class="col-md-4 col-xs-4">
                    <img src=""
                        title="Conners 3 Manual Cover" class="slider_cover" /></div>
                <div class="col-md-4 col-xs-4">
                    <img src=""
                        title="Software Iamge" /></div>
                <div class="col-md-4 col-xs-4">
                    <img src=""
                        title="CD" /></div>
            </div>
            <div class="item row text-center">
                <div class="col-md-4 col-xs-4">
                    <img src=""
                        title="Conners 3 Sample Report. Visit info.mhs.com/Conners3 to request a full sample report" /></a></div>
                <div class="col-md-4 col-xs-4">
                    <img src=""
                        title="Handscored available with MHS QuikScore" /></a></div>
            </div>
        </div>
        <ol class="carousel-indicators" style="background-color: Black; border: 1px solid white;">
            <li class="active" data-slide-to="0" data-target="#tabletSlider"></li>
            <li data-slide-to="1" data-target="#imageCarousel"></li>
            <li data-slide-to="2" data-target="#imageCarousel"></li>
            <li data-slide-to="3" data-target="#imageCarousel"></li>
            <li data-slide-to="4" data-target="#imageCarousel"></li>
        </ol>
    </div>
    <a data-slide="prev" href="#tabletSlider" class="left carousel-control"><i class="fa fa-caret-left largeArrows">
    </i></a><a data-slide="next" href="#tabletSlider" class="right carousel-control"><i
        class="fa fa-caret-right largeArrows"></i></a>
</div>
<!--End of the Desktop version of the slider-->

.img缩略图
{
高度：100px；
}
#图像转盘正常
{
最大宽度：250px；
保证金：0自动；
}
.imgBg
{
盒影：10px 10px 10px#636466；
}
.移动图像
{
最大宽度：250px；
保证金：0自动；
}
#图像旋转木马
{
保证金：0自动；
最大宽度：250px；
}
#模态窗口
{
保证金：0自动；
填充：0px；
}
.全尺寸
{
宽度：300px！重要；
}
旋转木马
{
显示：块；
}
.productImages
{
颜色：蓝色；
边缘顶部：100px；
}
.转盘指示器
{
颜色：红色！重要；
底部：5%；
}
.箭头
{
颜色：#1A3E6F；
边缘顶部：30px；
}
拉吉罗先生
{
颜色：黑色；
边缘顶部：150px；
字体大小：36px；
}
.imgCaption
{
边框：1px纯白；
填充物：5px；
颜色：黑色；
字体大小：14px；
字体系列：“打开Sans常规”；
利润率：20px；
}
.指示剂盒
{
边框：1px纯白；
填充物：5px；
背景色：黑色；
}
.边界测试
{
边框：1px纯黑；
}
.carousel-inner>.item>img.largeimg滑块
{
保证金：0自动！重要；
最大宽度：200px；
}
.transparentBG.modal-content
{
背景：透明；
}
#模态对话框
{
宽度：500px；
}
#模态bg
{
}
#法线视图滑块
{
显示：块；
}
#mobileView
{
显示：无；
}
幻灯片名称
{
颜色：#1A3E6F；
字体大小：16px；
字体系列：“Open Sans semibold”；
利润上限：-20px；
}
.桌面视图
{
显示：无；
}
#测试分类
{
背景图像：url（“http://betarome.mhs.com/Portals/1/DNNGallery/uploads/2015/7/29/Conners3_1.png");
宽度：500px；
背景重复：无；
}
.carousel-control.左
{
背景图像：无！重要；
}
.转盘控制，对
{
背景图像：无！重要；
}
.但是pos
{
位置：绝对位置；
底部：-50px；
右：-50px；
宽度：100px；
高度：100px；
光标：指针；
z指数：8040；
}
@介质（最大宽度：1024px）
{
#法线视图滑块
{
显示：无；
}
#mobileView
{
显示：无；
}
.桌面视图
{
显示：块！重要；
最大宽度：800px；
保证金：0自动；
}
}
@介质（最大宽度：667px）
{
#法线视图滑块
{
显示：无；
}
#mobileView
{
显示：无！重要；
}
.桌面视图
{
显示：块；
}
}
@介质（最大宽度：320px）
{
#法线视图滑块
{
显示：无！重要；
}
#mobileView
{
显示：块！重要；
}
.桌面视图
{
显示：无！重要；
}
#移动式录像机
{
显示：块！重要；
}
}
@介质（最大宽度：480px）
{
#法线视图滑块
{
显示：无；
}
#mobileView
{
显示：块；
}
.桌面视图
{
显示：无！重要；
}
}


康纳斯第三版



康纳斯3手册封面




软件映像