CSS 适用于 chrome 但不适用于 firefox

标签 css

我下面的 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 .我试图让出现在框架下方的蓝色框出现在框架前面的中央。

最佳答案

所以,最后这就是错误所在。

  1. 拥有<iframe>popup 之上在 html 结构中以某种方式搞砸了 positioningpopup .
  2. htmlbody只是在那里闲逛,他们并没有一直延伸到底部并限制 iframe 进一步移动,因为它的高度是用百分比设置的..(这是我记得在某个时候修复的东西..但是当它已经过了午夜时我正在检查它,所以谁知道它在哪里消失了 :D )

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

关于CSS 适用于 chrome 但不适用于 firefox,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6654155/

相关文章:

jquery - 如何使固定元素与文档底部保持特定距离?

css - 如何选择某物内的任何地方?

javascript - CSS/Javascript 鼠标悬停弹出框

html - 如何让 css div 拉伸(stretch)到 100% 的窗口

css - 覆盖上一个元素

html - 如何测试安装在三星电视上的 Maple 浏览器的 Web 开发?

CSS 动画 - 从左到右动画图像并沿成 Angular 路径增加高度

css - 如何在angular6中应用样式

html - 对齐自定义 LI SVG 图像

jquery - 将 href 添加到所选区域的 div