CSS3转换的回退

我有一个CSS3转换，可以在悬停状态下调整/定位div中的图像

这可以按预期工作，但我关心的是像IE9-这样的浏览器。是否可以编写此CSS代码，以便这些浏览器具有回退功能

理想情况下，回退应该显示图像，使其适合div，而不是僵化（）并且悬停时没有动画

我更喜欢只使用CSS的解决方案，而不是修改标记

完整代码示例：

HTML:

---

一般来说，CSS转换（以及大多数CSS）的设计都考虑了渐进增强。在不理解转换的浏览器中，预期的回退非常简单，就是忽略转换属性本身。这允许样式更改仍然发生，只是立即发生，而不是平滑过渡（如名称所示），并且不需要复杂的变通方法

然而，你要做的是，状态根本不会发生任何变化；您希望将图像固定在未缩放状态。那将需要更多的工作

如果一开始就实现了

@supports

，那么您很容易就能逃脱惩罚

img{
    display:block;
    position:absolute;
    height:auto;
    width:100%;
    top:0;
    left:0;

    -webkit-transition-property: width, left, top;
    -webkit-transition-duration: .8s;
    -webkit-transition-timing-function: ease-out;
    transition-property: width, left, top;
    transition-duration: .8s;
    transition-timing-function: ease-out;
}

@supports (-webkit-transition-property: all) or (transition-property: all) {
    div:not(:hover) img{
        width:200%;
        left:-30%;
        top:-60%;
    }
}

但当然，并非所有事情都是这样。真正令人遗憾的是，

@支持

提出得太晚，而实现仍然没有流行起来。但我离题了

看看caniuse.com上的支持表，基于Gecko和WebKit/Blink的浏览器似乎覆盖得非常好（除了Firefox 3.6和更早版本），这让我松了一口气，因为我想不出任何纯粹的基于CSS的解决方案来迎合这些引擎（除了丑陋的黑客）

对于其他浏览器，我可以看到一些其他解决方法：

• 如果您关心Presto Opera，那么可能值得包含

  -o-

  前缀

• 如果您关心Firefox<16，那么同样可以使用

  -moz-

• 对于IE，只需在条件注释中隐藏

  div:not（：hover）img

  规则就足够了，因为支持转换和忽略条件语句的IE的第一个版本恰好是相同的-版本10:

  <!--[if !IE]><!-->
  <style>
  div:not(:hover) img{
      width:200%;
      left:-30%;
      top:-60%;
  }
  </style>
  <!--<![endif]-->
  

  
  div:not（：悬停）img{
  宽度：200%；
  左-30%；
  前-60%；
  }
  

  注意这里使用的

  div:not（：hover）

  ，类似于上面假设的

  @supports

  示例。您需要相应地用

  img

  规则交换声明

---

一般来说，CSS转换（实际上是大多数CSS）的设计考虑到了渐进增强。在不理解转换的浏览器中，预期的回退非常简单，就是忽略转换属性本身。这允许样式更改仍然发生，只是立即发生，而不是平滑过渡（如名称所示），并且不需要复杂的变通方法

然而，你要做的是，状态根本不会发生任何变化；您希望将图像固定在未缩放状态。那将需要更多的工作

如果一开始就实现了

@supports

，那么您很容易就能逃脱惩罚

img{
    display:block;
    position:absolute;
    height:auto;
    width:100%;
    top:0;
    left:0;

    -webkit-transition-property: width, left, top;
    -webkit-transition-duration: .8s;
    -webkit-transition-timing-function: ease-out;
    transition-property: width, left, top;
    transition-duration: .8s;
    transition-timing-function: ease-out;
}

@supports (-webkit-transition-property: all) or (transition-property: all) {
    div:not(:hover) img{
        width:200%;
        left:-30%;
        top:-60%;
    }
}

但当然，并非所有事情都是这样。真正令人遗憾的是，

@支持

提出得太晚，而实现仍然没有流行起来。但我离题了

看看caniuse.com上的支持表，基于Gecko和WebKit/Blink的浏览器似乎覆盖得非常好（除了Firefox 3.6和更早版本），这让我松了一口气，因为我想不出任何纯粹的基于CSS的解决方案来迎合这些引擎（除了丑陋的黑客）

对于其他浏览器，我可以看到一些其他解决方法：

• 如果您关心Presto Opera，那么可能值得包含

  -o-

  前缀

• 如果您关心Firefox<16，那么同样可以使用

  -moz-

• 对于IE，只需在条件注释中隐藏

  div:not（：hover）img

  规则就足够了，因为支持转换和忽略条件语句的IE的第一个版本恰好是相同的-版本10:

  <!--[if !IE]><!-->
  <style>
  div:not(:hover) img{
      width:200%;
      left:-30%;
      top:-60%;
  }
  </style>
  <!--<![endif]-->
  

  
  div:not（：悬停）img{
  宽度：200%；
  左-30%；
  前-60%；
  }
  

  注意这里使用的

  div:not（：hover）

  ，类似于上面假设的

  @supports

  示例。您需要相应地用

  img

  规则交换声明

您可以使用或通过javascript功能检测路径

这里详细介绍了两种方法：

您可以使用或通过javascript功能检测路径

这里详细介绍了两种方法：

---

我们不要撒谎，我们谈论的唯一浏览器是IE9，所以只需添加：

width: 200%\9;
left: -30%\9;
top: -60%\9;

---

IE9将使用它。我们只希望2017年不再需要CSS黑客。

我们不要撒谎，我们谈论的唯一浏览器是IE9，所以只需添加：

width: 200%\9;
left: -30%\9;
top: -60%\9;

---

IE9将使用它。我们只希望2017年不再需要CSS破解。

@Jason:除了对转换的支持比

@支持更广泛之外。很难相信IE9不支持转换，我从未在IE9上尝试过我的演示，但我记得我在，据报道IE9确实支持过渡。也许我记错了。关于你的问题，你想要的后备结果还不清楚。你的意思是，结果应该首先应用于图像还是悬停？哦，对。。我还没有真正考虑过支持。那没关系。@KingKing这是我想要避免的，我需要图像没有悬停效果，并显示图像，例如
width:100%；高度：适用于不支持转换的浏览器。@KingKing我刚刚意识到我对IE9支持的css转换有这种感觉，因为我将它们与I支持的
transform
属性进行了比较