边距顶部：Chrome 和 Safari

Question

我一直在尝试找出使用 safari 时 margin-top 似乎无法正常工作的可能原因。但是当我尝试使用 Chrome 进行检查时，它工作正常。

铬

在图片中，您可以在此处看到光标悬停在项目上并更改图像。这个很好用

但是当我尝试使用测试时

Safari这个发生了

根据要求使用 *{border: 1px solid red;}

每当我尝试将项目悬停时，项目就会上升。

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;
  }

然后试着看看哪里有问题。完成后将屏幕截图发送给我。