Question

在Chrome和Safari中，CSS转换应用于.divisions a及其子img和span - 图片变大，标题渐入淡出。然而，Firefox ，只有转换.divisions a和子元素跳转到新状态而没有任何转换。

我不确定this question是否是同一个问题。如果在Firefox中无法修复此问题，是否有针对该浏览器的变通方法以便将过渡应用于子元素？

基本HTML：

<nav class="divisions">
    <ul>
        <li class="">
           <a href="#"><img src="./images.png" alt="" width="150" height="150">
             <span>Here's a caption</span></a>
        </li>
    </ul>
</nav>

相关CSS（还有更多，转换前）：

.divisions a, .divisions a img, .divisions a span {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}
.divisions a:hover {
    height: 270px;
    padding: 10px 0;
    overflow: visible;
}
.divisions a:hover img {
    width: 150px;
    height: 150px;
}
.divisions a:hover span {
    opacity: 1.0;
}

http://jsfiddle.net/mblase75/f5FKU/

Answer 1

事实证明，由于overflow不是可转换的属性，因此将.divisions a:hover更改为overflow:visible会破坏所有子元素的转换（但a不会本身，奇怪的是）。

删除该属性足以使所有内容在Firefox中正常运行：http://jsfiddle.net/mblase75/f5FKU/17/

.divisions a:hover {
    height: 270px;
    padding: 10px 0;
 /* overflow: visible; */
}

另见this question。

firefox不会将css转换应用于子元素

1 个答案: