Question

我有一个 CSS3 转换，可以在悬停时调整div中图像的大小/位置。

这可以按照需要运行，但我关注的是don't support CSS3 transitions喜欢IE9的浏览器。是否可以编写此CSS代码，以便这些浏览器具有后备支持？

理想情况下，后备应该显示图像，使其适合div并且不会受到影响（fiddle example）并且悬停时没有动画。

我更喜欢仅限CSS的解决方案，而不是改变标记。

完整代码示例：

HTML：

<div><img src="http://lorempixel.com/output/people-q-c-1000-500-7.jpg" />

CSS：

div{
    overflow:hidden; 
    width:500px; 
    height:250px;
    position:relative;
}
img{
    display:block;
    position:absolute;
    height:auto;
    width:200%;
    left:-30%;
    top:-60%;

    -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;
}
div:hover img{
    width:100%;
    top:0;
    left:0;
}

Answer 1

您可以使用Modernizr或浏览javascript功能检测路径。

这两种方式详述如下： Detect support for transition with JavaScript

Answer 2

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

然而，你要做的是完全没有任何状态变化;你希望你的图像固定在unzoomed状态。这将需要更多的工作。

如果@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%;
    }
}

但当然，并非一切都是那样的。真是遗憾@supports被提议得太晚了，实现仍然没有流行起来。但我离题了。

查看caniuse.com上的支持表，看起来基于Gecko和WebKit / Blink的浏览器覆盖得非常好（除了Firefox 3.6及更早版本），这是一种解脱，因为我无法想到任何基于CSS的纯解决方案，以满足那些引擎（丑陋的黑客除外）。

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

如果您关心Presto Opera，可能值得包含-o-前缀。
与-moz-同样如果您关心Firefox＆lt; 16。
对于IE，简单地将div:not(:hover) img规则隐藏在条件注释中就足够了，因为IE的第一个版本支持转换和忽略条件语句恰好相同 - 第10版：
```

<style>
div:not(:hover) img{
    width:200%;
    left:-30%;
    top:-60%;
}
</style>

```
请注意此处使用div:not(:hover)，类似于上面假设的@supports示例。您需要相应地将声明与img规则交换。

Answer 3

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

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

和IE9将使用它。我们可以在2017年希望不再需要CSS黑客攻击。

CSS3过渡的后备

3 个答案: