保證金最高：Chrome和Safari

Question

我一直在嘗試尋找使用Safari瀏覽器的上邊距似乎無法正常工作的可能原因。 但是，當我嘗試使用Chrome瀏覽器時，它運行正常。

鉻

在圖片中，您可以在此處看到光標懸停該項目並更改圖像。 這個很好用

但是當我嘗試使用

Safari這個發生了

根據要求使用* {border：1px純紅色；}

每當我嘗試懸停項目時，項目就會上升。

instructors.php

   <div id="gallery-container1">
   <div class="row-content1">
              <?php
    try{
    $connect = new PDO("mysql:host=$host;dbname=$database", $username, $password);
    $connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
            $query = "SELECT * FROM ch_users ORDER BY arrangement_id ASC";
            $data = $connect->query($query);
            foreach($data as $instructor_row){
            ?>
              <div class="img-container1">
              <div class="img-content1">
                <a data-toggle="modal" href="#edit" class="edit" >
                  <img src="img/instructor/<?php echo $instructor_row['thumbnail'];?>" class="thumbnail-image">
                  <img src="img/instructor/<?php echo $instructor_row['hover'];?>" class="hover-image fade-in">
                </a>
              </div>
            </div>
        <?php
                    }//end of foreach
                }//end of try
                catch(PDOException $error)
                {
                    $error->getMessage();
                }
                ?>
         <div class="clearfix"></div>
       </div><!-- #gallery end -->
        </div>

CSS

 #gallery-container1{
 margin-top:15vh;
 text-align:center;
 margin-bottom:10vh;
}
  .img-container1 {
  width:16.5%;
   display:inline-block;
  margin-bottom:30px;
   }
  .img-content1 {
   padding:0;
   height:auto;
  overflow:hidden;
   /*box-shadow:0 .8px .8px #ccc*/
  width:80%;
   }
 .img-content1 img {
   width:100%;
   height:auto;
  border: 1px solid #ddd;
  border-radius: 4px;
  -webkit-transition: border .2s ease-in-out;
  -o-transition: border .2s ease-in-out;
  transition: border .2s ease-in-out;
}
 .clearfix {
 clear:both;
  }
  @media only screen and (max-width: 560px) {
 .img-container1 {
  width:98%;
  margin-left:10%;
  } 
  }
  @media only screen and (min-width: 600px)and (max-width: 900px) {
  .img-container1 {
  width:38%;
  padding:1%;
  } 
  }
  .img-content1 .hover-image,
  .img-content1 :hover .thumbnail-image {
  display: none;
 }
 .img-content1:hover .hover-image {
  display: block;
 cursor: pointer
 }
   .fade-in {
   opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 0.6s;
  }
  @keyframes fadeInOpacity {
  0% {
    opacity: 0;
   }
   100% {
    opacity: 1;
   }
    }

Answer 1

嘗試通過以下方式對所有類進行樣式設置：

*{
   border: 1px solid red;
  }

然后嘗試查找問題所在。 完成后將截圖發送給我。