保证金最高:Chrome和Safari

时间:2018-09-19 17:55:41

标签: javascript php html css

我一直在尝试寻找使用Safari浏览器的上边距似乎无法正常工作的可能原因。但是,当我尝试使用Chrome浏览器时,它运行正常。

Chrome

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

enter image description here

但是当我尝试使用

进行测试时

Safari 发生了

enter image description here

根据要求,使用* {border:1px纯红色;}

enter image description here

每当我试图将它们悬停时,该项目就会上升。

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

1 个答案:

答案 0 :(得分:1)

尝试通过以下方式对所有类进行样式设置:

*{
   border: 1px solid red;
  }

然后尝试查找问题所在。完成后将截图发送给我。