使用負頁邊距時，Chrome和Firefox/IE的行爲會有所不同

Question

使用負頁邊距時出現問題。 Firefox和IE的渲染與Chrome不同。

我有一個類似於下面的佈局。

這裏是我的html

<div class="blue"> 
    <div class="column">Column</div> 
    <div class="column">Column</div> 
    <div class="column">Column</div> 
    <div class="column">Column</div> 
</div> 
<div class="red"> 
    <div class="column">Column</div> 
    <div class="column">Column</div> 
</div> 

這裏的基本結構是什麼，我試圖做一個示例圖像。

藍格是列有1px的右邊框的行。紅色div具有背景圖像的傾斜圖像（透明PNG）。我在紅色div上使用負邊距將其拉起並覆蓋藍色div的底部邊緣，以便藍色div中的邊框接觸紅色div中的傾斜區域。 （紫色區域）

我的問題是，在Firefox和IE瀏覽器中，紅色div內容的位置被我應用於它的負數頂部邊距的數量壓低。在Chrome中，此問題不存在。例如。如果我將margin-top: -70px應用於紅色div，它將在IE/FF中將內容壓低70px。

我不確定這裏發生了什麼。任何幫助，將不勝感激。

Answer 1

我不確定這是什麼，因爲你沒有發佈你的CSS，但也許你可以一些Reset CSS重置默認的CSS設置。有時你需要這個，因爲所有瀏覽器都有不同的默認CSS設置。

Answer 2

不同的瀏覽器確實支持不同的代碼。嘗試編寫僅在該瀏覽器中調用的代碼。例如：

/* Configure the animation for Firefox */ 
-moz-animation-duration:6s; 
-moz-animation-name:spin; 
-moz-animation-timing-function:linear; 

/* Configure it for Chrome and Safari */ 
-webkit-animation-duration:6s; 
-webkit-animation-name:spin; 
-webkit-animation-timing-function:linear; 

這是檢測不同的瀏覽器併爲每個瀏覽器說不同的事情。我使用這個例子是因爲它顯示了不同的代碼可以用於不同的瀏覽器，有時它也是需要的。這是我自己的網絡應用程序之一。