Chrome & Safari Absolute Div 显示问题

Question

出于某种原因，当您访问我的站点主页时：

bluestarnj.com chrome 或 Safari 页面顶部被截断。这只发生在浏览器高度较小的笔记本电脑上。它在 Firefox 中呈现完美。现在，如果我告诉它把自己定位在距离顶部 300px 的位置，它会在那些浏览器中正确呈现，但在 firefox 中它会被推到页面下方太远的位置。 CSS class 的代码如下：

.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;
}

Answer 1

您需要从 .main_content div 中删除 margin: auto;。

当 window 小于 div 时，它仍会自行居中，但代价是离开页面。不要担心在较小的屏幕上垂直居中，一旦视口大于那个 div。

，只需在桌面上这样做

Answer 2

问题似乎出在 "main_content" div 的边距上。我用 chrome 在我的笔记本电脑和一个巨大的显示器上进行了测试，这就是我得到的结果：

如您所见，在较小的屏幕上，顶部和底部边距变为负值。我发现了这个问题：Margin auto goes to negative values 有人提到 top 和 bottom 之间存在冲突。这正是这里的情况：您设置顶部和底部以及固定高度。出于某种原因 Chrome 首先将顶部设置为 50，然后尝试调整边距（因为它设置为自动）以便底部为 0。删除 bottom: 0px 就可以了！

编辑：但它不再垂直居中。

Chrome & Safari Absolute Div 显示问题

Chrome & Safari Absolute Div Display Issue

html

css

safari

google-chrome