前端之家

  1. 首页
  2. 问答

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>

YOZA007 回答：Lightbox 在 Firefox 90 mac 和 CodePen 中响应，但在 Safari 14 或 Chrome 92 中不响应
暂时没有好的解决方案，如果你有好的解决方案，请发邮件至：iooj@foxmail.com
cssgalleryhtmllightboxresponsive
本文链接：https://www.f2er.com/45055.html

大家都在问