Javascript 页边页首：Chrome&；游猎

我一直在试图找到使用safari时边距顶部似乎不起作用的可能原因。但当我尝试使用Chrome进行检查时，它工作正常

Chrome

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

但是当我尝试使用

Safari发生了这一次

按要求使用*{边框：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>

---

尝试通过以下方式设置所有类的样式：

*{
   border: 1px solid red;
  }

---

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

在image-container1中使用页边距顶部：30px，而不是页边距底部；你得到你想要的答案了吗？试着用float left代替display:inline block

*{
   border: 1px solid red;
  }