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

回答

相關問題