Question

我有一个元素,有一个儿童容器,起初被隐藏起来。当我盘旋在父母身上时,应该让孩子露面。简单。

现在,对于真正的浏览器,我想添加一些天赋,让孩子消失——同时仍然保持非 CSS3 兼容浏览器的基本功能。对于旧浏览器,我简单地切换 < code> display ,而对于所有孩子,我用凉爽浏览器来激活 < code> 不透明。应该是一个简单的操作,对吧?

令我大吃一惊和失望的是,这有点怪怪的。

在“强度”Firefox < /强度 > 。但是,嘿,我希望它开始完全透明,然后退缩 < 强度 > < /强度 >!

在 < 坚固> Webkit 中,动画不会触发,只触发 < code> display 切换。

在“强度”IE display (按预期,虽然我曾希望它将在IE10中动画)。

在 < 强度 > Opera 中, 一切工作都行得通。 & lt;3 & lt;3

现在,如果我从初始声明中删除display:none;,动画在Fx 中效果很好,但是我会遇到一些不酷的浏览器问题,令人痛心的是,这个项目的访客中主要使用这种浏览器。

由于我拥有现代的超能力, 我可以简单地做一个有条件的风格, 这样我就可以使用 < code> display 来切换到愚蠢的浏览器上, 生命又变得伟大了, 但问题仍然是:

< 强度 > 这是Fx/ Webkitz 中的错误, 还是故意的?

这里请看:http://jsfiddle.net/TheNix/q5bAZ/4/

Answer 1

问题是,转换发生在计算值变化时,当 display: non 设定时,浏览器不计算大多数属性的值。

有关这个图谱应该怎么说, 有一些... 热烈的讨论。参见线条起始于 < a href="http://lists.w3. org/Archives/Public/www- style/ 2011/Dec/0353.html" rel="no follow">http://lits.w3. org/Archives/Public/www-style/ 2011/Dec/0353.html , 并持续了过去4个月左右的时间。

Answer 2

简单省略 display 声明并添加

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

现在,通过瞄准 IEs 和其他旧浏览器, 你应该没事。

如果您想要异常精确, 您可将过滤器放入额外的 IE 样式表, 这样您就不会用愚蠢的 IE 外填来使您的样式表无效。 (但只有专有的前缀只有 xD )

友情链接