Javascript 为什么Google Chrome会忽略初始显示元素子元素的不透明度？

有

div

元素，其子元素

p

元素反复从隐藏状态变为显示状态。

display

和

opacity

属性都用于此操作。

opacity

属性的转换时间为1秒

周期如下：

将

display:none

更改为

display:initial

等待50毫秒，等待（它自己）

将

opacity:0

更改为

opacity:1

等2秒钟

将

opacity:1

更改为

opacity:0

等待1秒钟以完成转换

将

display:initial

更改为

display:none

等一秒钟

重复

这在FireFox中工作得非常好，但在Google Chrome中，它只在某些情况下工作，如代码片段所示

• 在简单的情况下，它不起作用
• 如果子

  p

  被设置为

  inline block

  ，则它可以工作
• 如果

  内联块

  元素是孙元素而不是子元素，则它不起作用
• 如果将子对象的位置设置为“固定”，则它会工作

奇怪的是，步骤5中的转换也失败了，这与

display

属性无关，因此这似乎不是由于回流失败造成的

var标志=true；
var元素；
window.onload=init；
函数init（）{
elements=document.getElementsByClassName（“foo”）；
cycleQuotes（）；
设定间隔（Cyclekotes，2000年）；
}
函数cycleQuotes（）{
国际单项体育联合会（旗）{
对于（var i=0；i

.foo{
显示：无；
不透明度：0；
过渡：不透明度1s；
}
.内联块{
显示：内联块；
}
#固定的{
位置：固定；
左：100px；
顶部：0px；
}

正常的

内联块
内联块，但外孙
固定

我能够将问题隔离在动画之外。出于某种原因，我不明白，Google Chrome不会将不透明度传播到具有

display:initial

的元素的子元素

div{
背景：红色；
显示：首字母；
不透明度：0；
}

div内的文本
段落内的文字

我能够将问题隔离在动画之外。出于某种原因，我不明白，Google Chrome不会将不透明度传播到具有

display:initial

的元素的子元素

div{
背景：红色；
显示：首字母；
不透明度：0；
}

div内的文本
段落内的文字

@jacquegoupil发现这是由

display:initial

和

opacity

属性组合造成的

进一步的研究表明，

initial

并不意味着“default”，这意味着它不会将属性的值设置为元素的默认值。它所做的是将属性设置为它在中定义为“初始”的值。在

显示

属性的情况下，

初始

表示

内联

---

，内联元素不能包含块元素，因为

p

元素默认情况下具有

display:block

。

@jacquegoupil发现这是由

display:initial

和

opacity

属性的组合造成的

进一步的研究表明，

initial

并不意味着“default”，这意味着它不会将属性的值设置为元素的默认值。它所做的是将属性设置为它在中定义为“初始”的值。在

显示

属性的情况下，

初始

表示

内联

---

，内联元素不能包含块元素，并且由于

p

元素默认情况下具有

显示：块

。

…除非子元素是

内联块

，或者具有

位置：固定

（可能还有其他一些情况）。在这两种情况下都有不错的发现；这可能是一个很大的难题。@Gendarme另一个解决方案是将不透明度和显示样式放在不同的包装上。这似乎也起作用了……除非子对象是

内联块

或具有

位置：fixed

（可能还有其他一些情况）。在这两种情况下都有不错的发现；这可能是一个很大的难题。@Gendarme另一个解决方案是将不透明度和显示样式放在不同的包装上。这似乎也有效。问题中的HTML不是无效的。MDN的描述基于“内联”和“块”的古老定义，模糊了HTML和CSS之间的界限。虽然块框不可能包含在内联框中，1）2）它不会改变HTML元素的性质，因此不会影响HTML的有效性。那么，它是Google Chrome中的一个bug吗@我想这大概回答了这个问题。这也曾经影响过Firefox，还有其他的讨论。不确定Chrome中的根本原因是否与这两种情况相关。问题中的HTML不是无效的。MDN的描述基于“内联”和“块”的古老定义