CSS适用于chrome，但不适用于firefox

我的CSS代码在Chrome中运行正常，但不适用于Firefox。我认为这可能只是语法上的差异，但我无法弄清楚发生了什么。我的CSS代码中是否有错误？CSS适用于chrome，但不适用于firefox

#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。我正试图让出现在框架下方的蓝色框出现在框架的中心。

来源

2011-07-11 Kvass

难道这是一个zIndex问题？我没有看到你在任何时候指定它...... – FreeSnow

我更喜欢回答问题，我可以自己检查问题或者在哪里可以轻松地查看代码。我也不知道什么问题可以马上脱离蝙蝠。 – Joonas

注意事项：在某些地方你使用'background：'而在其他地方使用'background-color：'。我会坚持后者。 – Sparky

所以，最终这是什么错误。

有在某种程度上搞砸与popup的positioning HTML结构的popup以上。
由于html和body只是挂在那里，他们没有一直伸展到底部，并限制iframe从更远的地方进入，因为它的高度是用百分比设置的。（这是我记得在某个时刻修复的东西..但它已经是过去时，我被检查到它午夜，所以谁知道那消失：d）

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

来源

2011-07-11 20:56:49 Joonas

不幸的是，虽然它看起来在JSFiddle中工作，但这并没有解决FireFox中的问题 - iframe仍然在顶部被碾压，而它应该跨越整个页面长度如下图所示：http://i1197.photobucket.com/albums/aa428/doodledude111/firefox--incorrectCSS.jpg – Kvass

将图片与所需的图片进行比较：http：// i1197。 photobucket.com/albums/aa428/doodledude111/chrome--correctCSS.jpg – Kvass

这是什么..我以为我在Firefox中做到了..我明天就要检查它。 – Joonas

为了让某些东西出现在另一个顶部，您需要设置Z-index值，并且我认为还要设置位置。

对于要在最前面的元素，将z-index的值是这样的：

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

您可能需要添加position: relative;或position: absolute;到一个或两个取决于什么位置那些你正在使用，但我无法确定。

来源

2011-07-11 17:57:25 Catfish

如果您不是完全针对一个JavaScript/jQuery的解决方案，这里是一个选项，可能会工作。我选择的onload做顶部和左侧的调整，但它会更有意义，当你调用popup_window创建做到这一点：

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

它的工作在Chrome，FF，IE和IE怪癖模式。

来源

2011-07-12 03:47:20

我不完全知道为什么，但是当我升级到Firefox 5时，问题自行解决。无论如何，谢谢大家！

来源

2011-07-12 04:41:50 Kvass

CSS适用于chrome，但不适用于firefox

回答

相关问题