Question

我写了一个css，当它悬停在它上面时会浮动一个div ...它在Chrome和Firefox中工作但在Safari中没有。

这是Css：

.float {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0);
 -webkit-box-shadow:0 6px 6px #000;
-moz-box-shadow:0 6px 16px #000;
box-shadow:0 6px 6px #000;
}

.float:hover {
   -webkit-transform: translateY(-5px);
   -ms-transform: translateY(-5px);
    transform: translateY(-5px);
}

我的HTML代码是：

 <div class="float">
  <img src="image1.jpg" />
 </div

Answer 1

快速浏览一下，你错过了结束div标签上的右括号。您的HTML应如下所示：

 <div class="float">
  <img src="image1.jpg" />
 </div>

我相信一些现代浏览器会假设它应该关闭并浏览问题，这可能解释了Chrome和Safari之间的差异。

希望有所帮助

CSS属性无法使用

1 个答案: