时间戳

首页 > 解决方案 > 在 Internet Explorer 中工作时，CSS 代码在 Google Chrome 中不起作用

css - 在 Internet Explorer 中工作时，CSS 代码在 Google Chrome 中不起作用

问题描述

我已经编写了一些样式表代码来应用图像的过渡和变换效果。问题是该代码适用于 Internet Explorer 浏览器，但不适用于 Google Chrome 浏览器。

<a href="/SM/AddSMHome/" title="Add New Student" class="rotateImage">
<img src="/icon/SM_add_student3.png" class="img- responsive img-circle img-thumbnail" style="max-width: 100px;max-height: 100px;" alt="Add New Student"></a>

.rotateImage:hover {
    transition: all 800ms ease-in-out !important;
    -ms-transform: rotate(360deg) !important;
    -webkit-transform: rotate(360deg) !important;
    -moz-transform: rotate(360deg) !important;
    -o-transform: rotate(360deg) !important;
     transform: rotate(360deg) !important;
           }

标签： css

解决方案

不可替换的内联框不属于“可转换”元素，默认情况下a是inline。

添加display:inline-block元素，然后它将起作用。

（我建议为元素的默认状态添加它，如果你只在悬停时添加它，它可能会在更复杂的布局中产生意想不到的副作用。）

推荐阅读