如何解决Lightbox 在 Firefox 90 mac 和 CodePen 中响应,但在 Safari 14 或 Chrome 92 中不响应
我将这个灯箱用于课堂项目。图像缩略图在 Firefox 和 CodePen 中按预期工作(在较大的显示器上从 1 列响应到 6 列),但我在 Safari 和 Chrome 中只看到 1 列,无论屏幕大小如何。我在 stackoverflow 上找到了原始 html 代码。我尽可能多地研究了这个问题,并使用了供应商前缀,但没有成功。有人可以称重吗?初学者,顺便说一句。
.img-thumbnail {
border: 1px solid #d3d3d3;
margin-right: 20px;
margin-bottom: 25px;
padding: 4px;
width: 100%;
}
.image-grid {
/* Arrange children using flexBox */
display: -webkit-Box;
display: -ms-flexBox;
display: flex;
/* ALlow images to display on multiple lines rather than a single line */
-ms-flex-wrap: wrap;
flex-wrap: wrap;
/* Container should take up only 90% of the browser,leave 5% space on each side */
width: 90%;
/* Center container */
margin: 0 auto;
-webkit-Box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.grid-image {
/* images display inline by default and act like text. We want them to act like divs,so display block */
display: block;
/* our width setting for mobile,one image per line */
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
/* provide some space between our images */
padding: 15px;
/* ensure padding doesn't cause images to wrap,it should be within the width rather than in addition */
-webkit-Box-sizing: border-Box;
Box-sizing: border-Box;
width: 70%;
}
.grid-image:hover {
background-color: white;
-webkit-Box-shadow: 6px 6px 20px rgba(0,.6);
Box-shadow: 6px 6px 20px rgba(0,.6);
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
.grid-image:focus {
-webkit-Box-shadow: 10px 10px 50px rgba(0,.6);
Box-shadow: 10px 10px 50px rgba(0,.6);
width: 47%;
-webkit-transform: none;
-ms-transform: none;
transform: none;
outline: none;
-webkit-transition: all .75s ease-in-out;
-o-transition: all .75s ease-in-out;
transition: all .75s ease-in-out;
}
/*increase images per line as browser gets larger using media queries
this first query makes two images per line at 576px width */
@media only screen and (min-width: 576px) {
.grid-image {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
}
/* three images per line when browser width exceeds 768px
*/@media only screen and (min-width: 768px) {
.grid-image {
-ms-flex-preferred-size: 33.333%;
flex-basis: 33.333%;
}
}
/* four images per line when browser width exceeds 992px */
@media only screen and (min-width: 992px) {
.grid-image {
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
}
}
/* five images per line when browser width exceeds 1200px
*/@media only screen and (min-width: 1200px) {
.grid-image {
flex-basis: 20%;
-ms-flex-preferred-size: 20%;
flex-basis: 20%;
}
}
/* six images per line when browser width exceeds 1950px
*/@media only screen and (min-width: 1950px) {
.grid-image {
flex-basis: 15%;
-ms-flex-preferred-size: 15%;
flex-basis: 15%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
<Meta name="description" content="" />
<Meta name="author" content="" />
<title>My Landing Page</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/img/myAvatar(3).png" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.1/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/stylesoldcolors.css" rel="stylesheet" />
</head>
<!-- My Dogs-->
<section class="page-section-dogs" id="dogs">
<div class="col-lg-12 ml-auto mt-1 mb-4">
<h2 class="dogshead mb-5" style="text-align: center">Meet the Family Dogs</h2></div>
<div class="col-lg-12 ml-auto mt-1 mb-4">
<h3 class="dogs-subhead mb-3">Tina</h3></div>
<div class="image-grid">
<img class="grid-image" src="https://i.ibb.co/BCXBx4n/DSCN0083edit2.jpg" alt="tina side" />
<img class="grid-image" src="https://i.ibb.co/6005YFR/DSCN0101.jpg" alt="tina smile" />
<img class="grid-image" src="https://i.ibb.co/bFLq278/TINA2edit.jpg" alt="tina bed" />
<img class="grid-image" src="https://i.ibb.co/qRrpltX/DSCN0097.jpg" alt="tina hat" />
<img class="grid-image" src="https://i.ibb.co/JrMdNLy/TINA1edit.jpg" alt="tina face" />
<img class="grid-image" src="https://i.ibb.co/YQ34XN4/DSCN0071edit2.jpg" alt="tina concentrate" />
</div>
<div class="col-lg-12 ml-auto mt-1 mb-4">
<h3 class="dogs-subhead mb-3">Darla</h3></div>
<div class="image-grid">
<img class="grid-image" src="https://i.ibb.co/YDxGGq8/darla-groom.jpg" alt="darla groom" />
<img class="grid-image" src="https://i.ibb.co/vkkHDMf/415581-1718705863100-1701889621-834731-1006747103-p.jpg" alt="darla christmas" />
<img class="grid-image" src="https://i.ibb.co/8xyCV8p/Darla122410-copy.jpg" alt="darla rest" />
<img class="grid-image" src="https://i.ibb.co/DWb5wPg/IMG-0173.jpg" alt="darla pizza" />
<img class="grid-image" src="https://i.ibb.co/xXy5p0H/darla-crop2.jpg" alt="darla sploot" />
<img class="grid-image" src="https://i.ibb.co/NK5WTn4/IMG-0400edit.jpg" alt="darla bone" />
</div>
<div class="col-lg-12 ml-auto mt-1 mb-4">
<h3 class="dogs-subhead mb-4">Amber</h3></div>
<div class="image-grid">
<img class="grid-image" src="https://i.ibb.co/VHM04dJ/DSCN0065a.jpg" alt="Amber dapple" />
<img class="grid-image" src="https://i.ibb.co/Y3cynLN/DSCN0062.jpg" alt="Amber relax" />
<img class="grid-image" src="https://i.ibb.co/9ZfXJNW/IMG-1668.jpg" alt="Amber toy" />
<img class="grid-image" src="https://i.ibb.co/pyRBFgr/Amber-Dec262002-2.jpg" alt="Amber winter" />
<img class="grid-image" src="https://i.ibb.co/SmNbW2z/DSCN0051.jpg" alt="Amber close" />
<img class="grid-image" src="https://i.ibb.co/6twX5wy/Amber-08-28-04.jpg" alt="Amber smile" />
</div>
</section>
<!-- Bootstrap core JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Third party plugin JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<!-- Contact form JS-->
<script src="assets/mail/jqBootstrapValidation.js"></script>
<script src="assets/mail/contact_me.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。