Chrome 和 Safari 绝对 div 显示问题答案

【问题标题】：Chrome & Safari Absolute Div Display IssueChrome 和 Safari 绝对 div 显示问题
【发布时间】：2015-04-24 22:50:43
【问题描述】：

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

chrome 或 safari 上的 bluestarnj.com 页面顶部被截断。这只发生在浏览器高度较小的笔记本电脑上。它在Firefox中渲染得非常好。现在，如果我告诉它距离顶部 300 像素的位置，它会在这些浏览器中正确呈现，但在 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;
}

【问题讨论】：

它在桌面上正确显示，没有问题。

标签： html css google-chrome safari

【解决方案1】：

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

当窗口小于该 div 时，它仍会居中，但代价是离开页面。不要担心在较小的屏幕上垂直居中，只要视口大于那个 div 就可以在桌面上这样做。

【讨论】：

谢谢老兄，是的，我刚刚将边距切换到左右边距，没有任何问题。我在想这是一个保证金问题，应该在我浪费人们的时间问这个问题之前尝试一下！

【解决方案2】：

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

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

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

【讨论】：