Question

我遇到溢出问题：隐藏内容，但仅限于FF。 enter image description here

我有两个div（垂直箭头的每一边，见上文）每个都有溢出：隐藏应用遮蔽它们各自的子div。子元素正在通过jQuery旋转onscroll事件。无论出于何种原因，每个子元素中的背景图像都不会被它们的父div屏蔽掉。

在检查Firebug中的任何父级CSS属性时，会出现奇怪的内容。

编辑：找到CSS / HTML / JQuery

每次更新onscroll时都会运行此代码（很多）;

    scrollAnimations.push({ 'start': 0, 'end': 450,
                'callback': function(scrollTop,scrollDirection){ 
                    ran_one.css({
                        '-ms-transform': 'rotate('+ -(scrollTop)*0.4 +'deg)',
                        '-webkit-transform': 'rotate('+ -(scrollTop)*0.4 +'deg)',
                        '-moz-transform': 'rotate('+ -(scrollTop)*0.4 +'deg)',
                        '-o-transform': 'rotate('+ -(scrollTop)*0.4 +'deg)',
                        'transform': 'rotate('+ -(scrollTop)*0.4 +'deg)' })
                    }
                });
            scrollAnimations.push({ 'start': 0, 'end': 900,
                'callback': function(scrollTop,scrollDirection){
                    ran_two.css({
                        '-ms-transform': 'rotate('+ -(scrollTop)*0.4 +'deg)',
                        '-webkit-transform': 'rotate('+ -(scrollTop)*0.4 +'deg)',
                        '-moz-transform': 'rotate('+ -(scrollTop)*0.4 +'deg)',
                        '-o-transform': 'rotate('+ -(scrollTop)*0.4 +'deg)',
                        'transform': 'rotate('+ -(scrollTop)*0.4 +'deg)' })
                    }
                });

CSS;

#rainbow-mask-right{
        width:421px;
        height:421px;
        display:block;
        position:absolute;
        bottom:0;
        left: 50%;
        overflow:hidden;
        }
    #rainbow-mask-left{
        width:421px;
        height:421px;
        display:block;
        position:absolute;
        bottom:0;
        left: 50%;
        overflow:hidden;
        margin-left: -420px;
        visibility:visible;
        }
    #ran-one{
        background:url(images/home/rainbow/ran-dash.gif) no-repeat;
        width:421px;
        height:421px;
        display:block;
        top: 421px;
        position: absolute;

        transform: rotate(50deg);
        -ms-transform: rotate(50deg); /* IE 9 */
        -webkit-transform: rotate(50deg); /* Safari and Chrome */
        -moz-transform: rotate(50deg); /* Firefox */
        -o-transform: rotate(50deg); /* Opera */
        }
    #ran-two{
        background:url(images/home/rainbow/ran-colour.gif) no-repeat transparent;
        width:421px;
        height:421px;
        display:block;
        top: 421px;
        position: absolute;
        left: 421px;
        }
   .set-origin {
    transform-origin:0 0;
    -ms-transform-origin:0 0; /* IE 9 */
    -webkit-transform-origin:0 0; /* Safari and Chrome */
    -moz-transform-origin:0 0; /* Firefox */
    -o-transform-origin:0 0; /* Opera */
    }

和HTML

<div id='rainbow-mask-right'><div id='ran-one' class="set-origin"></div></div>
<div id='rainbow-mask-left'> <div id='ran-two' class="set-origin"></div></div>

Answer 1

好吧，经过一段时间的调试，我很确定我发现了这个问题。

看起来FireFox不喜欢显示空容器。我在13.1，但在通过FireBug编辑HTML之后，最终结果如下：

space enter

只需添加一个简单的

即可

&nbsp;

到了彩虹，它应该是一场胜利。

很棒的网站！享受，

<div id="rainbow-mask-right"><div id="ran-one" class="set-origin">&nbsp;</div></div>
<div id="rainbow-mask-left"><div id="ran-two" class="set-origin">&nbsp;</div></div>

溢出：隐藏在FF中

1 个答案: