>我有一个元素，有一个最初隐藏的子容器。当我将鼠标悬停在父项上时，应该显示子项。简单。
现在，对于真正的浏览器，我想添加一些天赋，让孩子淡入 - 同时仍然保留非CSS3兼容浏览器的基本功能。对于旧浏览器，我只需切换display，同时我为所有使用酷浏览器的孩子制作opacity动画。应该是一个简单的操作，对吧？
令我非常惊讶和失望的是，这是一种越野车。
在 Firefox 中，当我将鼠标悬停在上面时，子元素会切换到完全不透明，然后淡出。但是，嘿，我希望它开始时完全透明，然后淡入！
在 Webkit 中，动画不会触发 - 只有display切换。
在IE（包括IE10 PP）中，它也只是简单地切换display（正如预期的那样，尽管我希望它会在IE10中动画化）。
在歌剧中，一切都在膨胀。 <3 <3
现在，如果我从初始声明中删除display:none;，动画在 Fx 中运行良好，但随后我会遇到不酷的浏览器问题，可悲的是，这在这个特定项目的访问者中占主导地位。
由于我拥有 Modernizr 的强大功能，我可以简单地制作一个条件样式，以便我只在愚蠢的浏览器上使用display切换，生活再次变得美好，但问题仍然存在：
这是Fx/Webkitz中的错误，还是故意的？
这里有一个小提琴供您查看：http://jsfiddle.net/TheNix/q5bAZ/4/
问题是转换发生在计算值更改时，并且浏览器在设置display: none时不会计算大多数属性的值。
有一些...关于规范应该对此说些什么的热烈讨论。 查看从 http://lists.w3.org/Archives/Public/www-style/2011Dec/0353.html 开始到过去 4 个月左右的线程。
只需省略display声明并添加
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
filter: alpha(opacity=x); // x = 0 ... 100.
现在针对IE和其他旧浏览器，您应该没问题。
如果你想特别准确，你可以把过滤器放到一个额外的IE样式表中，这样你就不会用愚蠢的IE东西使你的样式表无效。（但只有专有前缀xD）