CSS在Chrome中可以正常工作，但在Firefox中无法正常工作。

Question

CSS在Chrome中可以正常工作，但在Firefox中无法正常工作。

3

我的CSS代码在Chrome中运行良好，但在Firefox中无法正常工作。我认为这可能只是语法上的差异，但我无法弄清楚出了什么问题。下面的CSS代码是否有任何错误？

#framed_source {
    background-color: white;
    display: block;
    height: 97%;
    width: 100%;
    padding: 0px;
}

#grey_cover {
    position: fixed;
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
    top: 0px;
    left: 0px;
    background-color: #3F3F3F;
    /* Transparency is applied through the transparent class */
}

#popup_window {
    background: #D0E9F3;
    visibility: visible;
    border: 1px solid #666;
    padding-top:20px;
    padding-bottom:20px;
    padding-right:20px;
    padding-left:20px;
}

.with_frame {
    position: absolute;
    width: 600px;
}

#popup_window_content {
    overflow: auto;
    color: #1F313E;
    font-family: Calibri;
    max-height: 200px;
}

.transparent {
        /* Required for IE 5, 6, 7 */
        /* ...or something to trigger hasLayout, like zoom: 1; */
        width: 100%; 

        /* Theoretically for IE 8 & 9 (more valid) */
        /* ...but not required as filter works too */
        /* should come BEFORE filter */
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

        /* This works in IE 8 & 9 too */
        /* ... but also 5, 6, 7 */
        filter: alpha(opacity=50);

        /* Older than Firefox 0.9 */
        -moz-opacity:0.5;

        /* Safari 1.x (pre WebKit!) */
        -khtml-opacity: 0.5;

        /* Modern!
        /* Firefox 0.9+, Safari 2?, Chrome any?
        /* Opera 9+, IE 9+ */
        opacity: 0.5;
}

基本上我有一个弹出窗口，它显示在iframe的顶部。在Chrome中，它可以正确地显示，但在FF中，它会显示在iframe下方。有什么想法吗？我认为这与绝对/相对定位有关。 Firefox图片--CSS不正确 Chrome图片--CSS正确我还创建了一个JSFiddle，其中包含相应的HTML和CSS。我正在尝试让出现在框架下方的蓝色框在框架前面居中显示。

- Kvass

1

可能是zIndex的问题吗？我没有看到你在任何地方指定它... - Freesnöw

我认为那只是一个无耻的宣传。至少这是他的个人资料所显示的。 - Joonas

抱歉，我复制的链接有误。感谢您的提醒。 - Jagan Chennai

没问题 - 那么有没有人根据这些图片想到什么主意吗？大多数“弹出窗口”相关的 ID 对应你所看到的弹出窗口，framed_source 对应后台的网站。 - Kvass

1

@Kvass，我真的无法理解这段代码，但我希望这个小例子能有所帮助。http://jsfiddle.net/SNpR8/（目前来看，在所有主流浏览器和ie6+中都应该可以正常工作） - Joonas

显示剩余7条评论

4个回答

1

我不太清楚为什么，但当我升级到Firefox 5后，问题就解决了。无论如何，感谢大家的时间！

- Kvass

0

要想让一个元素出现在另一个元素的上方，您需要设置z-index值，同时我认为还要设置位置。

对于您想置于顶层的元素，请像这样设置z-index值：

#idOfTopElement {
    z-index: 1;
}
#idOfNextElement {
    z-index: 2;
}

你可能需要添加position: relative;或者position: absolute;到其中一个或两个，具体取决于你使用的位置，但是我不确定。

- Catfish

0

如果您不完全反对使用JavaScript/jQuery解决方案，这里有一个可能有效的选项。我选择在onload时进行顶部和左侧调整，但在调用弹出窗口的创建时进行调整更为合理：

http://jsfiddle.net/CH6ny/4/

它在Chrome、FF、IE和IE怪异模式下都能正常工作。

- Aaron Ray

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joonas · Accepted Answer

最后，问题出在这里：

在html结构中，<iframe>在popup上方会影响popup的定位。
由于html和body没有完全延伸到底部，并且使用百分比设置了iframe的高度，所以它无法继续向下延伸（我记得曾经修复过这个问题，但那时候已经过了午夜，所以不知道问题出在哪里 :D）

http://fiddle.jshell.net/CH6ny/6/