我一直在尝试寻找使用Safari浏览器的上边距似乎无法正常工作的可能原因。但是,当我尝试使用Chrome浏览器时,它运行正常。
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;
}
}
答案 0 :(得分:1)
尝试通过以下方式对所有类进行样式设置:
*{
border: 1px solid red;
}
然后尝试查找问题所在。完成后将截图发送给我。