2

我有一个元素，带有一个最初隐藏的子容器。当我将鼠标悬停在父级上时，应该显示子级。简单的。

现在，对于真正的浏览器，我想添加一些天赋并让孩子淡入 - 同时仍然保留非 CSS3 兼容浏览器的基本功能。对于旧的浏览器，我只是简单地切换，同时我用很酷的浏览器为所有孩子display制作动画。opacity应该是简单的操作吧？

令我非常惊讶和失望的是，这有点像马车。

在Firefox中，当我将鼠标悬停在上面时，子元素会在淡出之前切换为完全不透明。但是，嘿，我希望它以完全透明的方式开始，然后淡入！

在Webkit中，动画不会触发——只有display切换。

在IE（包括 IE10 PP）中，它也只是简单地切换display（正如预期的那样，虽然我希望它会在 IE10 中动画）。

在Opera中，一切都运行良好。<3 <3

现在，如果我从最初的声明中删除，动画在Fxdisplay:none;中可以很好地工作，但是我会遇到不酷的浏览器的问题，遗憾的是，这在这个特定项目的访问者中占主导地位。

由于我拥有 Modernizr 的能力，我可以简单地制作一个条件样式，以便我display只在愚蠢的浏览器上使用切换，生活又美好了，但问题仍然存在：

这是 Fx/Webkitz 中的错误，还是故意的？

这里有一个小提琴供你看：http: //jsfiddle.net/TheNix/q5bAZ/4/

4

2 回答 2

4

问题是转换发生在计算值更改时，并且浏览器在设置时不会计算大多数属性display: none的值。

有一些......关于规范应该对此说些什么的热烈讨论。请参阅从http://lists.w3.org/Archives/Public/www-style/2011Dec/0353.html开始并在过去 4 个月左右的线程。

于 2012-05-25T17:16:15.883 回答
0

只需省略display声明并添加

-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(opacity=x); // x =  0 ... 100.

现在针对 IE 和其他较旧的浏览器，您应该没问题。

如果您想更加准确，请将过滤器放入额外的 IE 样式表中，这样您就不会用愚蠢的 IE 内容使您的样式表无效。（但只有专有前缀 xD ）

于 2012-05-25T10:11:04.437 回答