Chrome和Safari瀏覽器的絕對股利顯示問題

出於某種原因，當你到我的網站的首頁：Chrome和Safari瀏覽器的絕對股利顯示問題

bluestarnj.com在Chrome或Safari頁面的頂部被切斷。這隻發生在瀏覽器高度較小的筆記本電腦上。它在Firefox中呈現完美。現在，如果我告訴它將自身定位在頂部300px，它將在這些瀏覽器中正確呈現，但在Firefox中它會被推到頁面的太遠處。該類CSS代碼如下：

.main_content { 
width: 1000px; 
height: 900px; 
margin: auto; 
position: absolute; 
top: 50px; 
left: 0; 
bottom: 0; 
right: 0; 
background: linear-gradient(white, grey); 
border-style: solid; 
border-width: 0.188em; 
border-radius: 1.563em; 
border-color: red; 
display: block; 
}

來源

2015-02-23 Baroti

它在桌面上沒有問題正確顯示。 – Baroti 2015-02-23 15:05:04

您需要從您的.main_content DIV刪除margin: auto;。

當窗口小於該div時，它仍然以自己爲中心，但是以離開頁面爲代價。不要擔心在較小的屏幕上垂直居中，並且只要視口大於該div，就在桌面上執行此操作。

來源

2015-02-23 15:14:34

謝謝兄弟，是的，我只是將保證金切換到保證金左側和右側，並沒有問題。我認爲這是一個保證金問題，應該在我浪費人們問這個問題之前嘗試過！ – Baroti 2015-02-23 15:29:13

該問題似乎與「main_content」div的邊距有關。我測試了我的筆記本電腦，並用鍍鉻巨大的顯示屏上，這就是我得到：

Chrome margin diagram

正如你所看到的，較小的屏幕上的頂部和底部的利潤率成爲負數。我發現這個問題：Margin auto goes to negative values有人提到top和bottom之間的衝突。這裏就是這種情況：您設置頂部和底部以及固定高度。出於某種原因，Chrome首先將頂部設置爲50，然後嘗試調整邊距（因爲它設置爲自動），因此底部將爲0.刪除bottom: 0px並且它可行！

編輯：但它不會被垂直居中。

來源

2015-02-23 15:23:57

Chrome和Safari瀏覽器的絕對股利顯示問題

回答

相關問題