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浏览器的绝对股利显示问题

回答

相关问题