Firefox顯示負邊距不正確

我的佈局工作正常，但沒有在Firefox中。我使用負邊距來縮小YouTube視頻背後的綠色框的頂部和底部。Firefox顯示負邊距不正確

下面是它應該如何看： chrome screencap

這裏是它的外觀在Firefox： firefox screencap

這裏有一個真人版看：live site

以下是相關的JS提琴代碼：jsfiddle

我原本忘記提到高度是可變的，因爲有wil l是.frame類中的不同類型的視頻和照片。有沒有什麼辦法可以解決這個Firefox問題而不需要定義高度？

我也打算重新組織這個，如果有更好的方法來寫它，並獲得相同的效果。

來源

2012-03-16 danapaige

IE9標準模式得到它「錯誤」也一樣，IE9「IE8標準」模式和兼容性視圖得到它的「右」;）） – Aprillion 2012-03-16 21:20:37

採取：

觀看我們的YouTube頻道

出了更多的視頻，並把它的正下方

修復它爲我，你那麼就需要將H4轉移到留下一點應該很容易。

希望幫助，下面是複製的代碼

馬丁

編輯：單獨離開HTML，並更改CSS的：H4。標題爲

h4.caption{ 
display:table; 
padding-right:5px; 
text-align:right; 
width:100%; 
}

來源

2012-03-16 22:56:25 SmithMart

我明白你的意思，但視頻的寬度也是可變的。因此，我使用captionwrap將「觀看YouTube頻道」文本右對齊視頻的右側邊緣。 – danapaige 2012-03-16 23:08:31

編輯，所以它隻影響CSS。這也似乎工作，它正在停止framewrap-gr div擴大在h4 – SmithMart 2012-03-16 23:21:35

哦，我也注意到在Firefox上的菜單，關於我們的商品，發現我們...在盒子裏略微低。取出.ffnav a中的填充並添加：line-height：30px;或者你想要多少像素，盒子會調整大小和中間對齊你的文字 – SmithMart 2012-03-16 23:26:51

如果您設置綠色框的高度，它似乎很好。

.framewrap-gr { height: 390px; }

我只說這是因爲你的iframe高度似乎是固定的。

評論

我會建議你改變如何構建它之後。保留一個容器div，在其中放置一個bg div和video div，z-index將視頻放在bg圖層的頂部，並設置bg圖層的樣式（相對於它們的父級）

來源

2012-03-16 21:19:01 mikevoermans

啊！我忘了提及，.frame中會有不同的視頻和照片，因此高度需要變化。抱歉。 – danapaige 2012-03-16 21:20:03

嗯......我正在嘗試使用z-index對背景顏色和視頻進行分層。我無法讓背景的高度受限於視頻的高度。也許我應該寫一個新的問題。 – danapaige 2012-03-16 23:23:04

這裏是你的css ：

.framewrap-gr, .framewrap-fb, .framewrap-map { 
-moz-border-radius: 10px; 
border-radius: 10px; 
margin: 50px 0 80px 0; 
position: relative;

}

嘗試做到這一點：

.framewrap-gr, .framewrap-fb, .framewrap-map { 
-moz-border-radius: 10px; 
border-radius: 10px; 
margin: 50px 0 80px 0; 
position: relative; 
margin-bottom: -15px;

}

它可以工作，但如果沒有，檢查什麼螢火蟲對你說！

對不起，英語不好，我是巴西人。

來源

2012-03-16 21:20:31

這似乎並不奏效。 – danapaige 2012-03-16 21:42:42

Firefox顯示負邊距不正確

回答

相關問題