Question

我的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下方显示弹出窗口。有任何想法吗？我认为这与绝对/相对定位有关。

Picture of Firefox -- Incorrect CSS Picture of Chrome -- Correct CSS

我还创建了一个JSFiddle for this CSS with the corresponding HTML。我试图让出现在框架下方的蓝框出现在框架前面的中心位置。

Answer 1

所以，最终这是错误的。

在html结构中<iframe>之上popup以某种方式搞砸了positioning的{{1}}。
由于popup和html只是挂在那里，他们并没有伸展到底部并且限制了iframe的进一步发展，因为它的高度设置为百分比..（这是我的事情）记得在某个时刻修理..但是当我进入它的时候已经过了午夜，所以谁知道它消失的地方：D）

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

Answer 2

我不知道为什么，但是当我升级到Firefox 5时，问题就解决了。无论如何，感谢大家所有的时间！

Answer 3

要让某些内容出现在另一个上面，您需要设置z-index值，我认为还要设置位置。

对于您想要位于顶部的元素，请设置z-index值，如下所示：

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

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

Answer 4

如果你不完全反对javascript / jQuery解决方案，这里有一个可能有用的选项。我选择进行顶部和左侧调整onload，但是当你调用popup_window的创建时，它会更有意义：

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

它适用于Chrome，FF，IE和IE怪癖模式。

CSS适用于chrome但不适用于firefox

4 个答案: