html - Chrome 和 Safari 绝对 Div 显示问题

标签 html css google-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;
}

最佳答案

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

当窗口小于该 div 时,它仍会自行居中,但代价是离开页面。不要担心在较小的屏幕上垂直居中,一旦视口(viewport)大于那个 div,就在桌面上这样做。

关于html - Chrome 和 Safari 绝对 Div 显示问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28676752/

相关文章:

javascript - 折叠的导航栏下拉时如何更改背景颜色?

jquery动画与手机

css - WP Bakery 选项卡动画覆盖

html - 在浏览器调整大小时将背景保留在文本后面

Silverlight 页面加载来自 Microsoft 的不安全内容

javascript - Chrome 通知点击关闭按钮

<li> 标签内的 HTML/CSS <ul> 标签 - 周围的元素会移动

javascript - 使用 HTML5 Drag'n'Drop 进行列表排序 - 根据鼠标拖放到上方或下方

javascript - HTML/JS : How to trace the event handlers and corresponding files

javascript - 子菜单中的 html/css 条件样式