我最近创建了一个bootstrap轮播来显示一系列图像。它适用于IE和Chrome。但是，它在Firefox中有点不稳定。由于这必须是响应式的，我只使用了一组图像并制作了不同的版本。
对于我的桌面，我有一个缩略图大小/格式的滑块。单击图像时，会弹出一个模态窗口，图像会扩大到更大的尺寸。
对于移动版，我没有使用模态窗口。每张图片都有手机和幻灯片的宽度。
对于平板电脑，每张幻灯片都有三张图片。
在我的mediar查询中，我会使用＆＃34; display＆＃34;隐藏或显示不同的版本。基于设备分辨率。
然而，FireFox的问题在于当滑块转换到下一张幻灯片时，图像会先快速扩展，然后再回到我为任何特定版本设置的大小。我并不是真的想根据版本调整图片大小，只是为了让一切变得简单。
我想知道是否有人知道如何解决这个问题。任何建议将不胜感激。
露西答案 0 :(得分：0)
<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-->