浏览器工具栏干扰CSS标题区域

我正在设计一个网页的过程中，我正在使用以下CSS来创建页面标题，主页眉图像以1000px宽度页面为中心，重复边缘图像穿过正文的顶部并在标题下方展开，以遍布整个浏览器页面宽度。浏览器工具栏干扰CSS标题区域

body { 
    font-family: Tahoma; 
    background-color: #0184AE; 
    background-image: url('/images/headeredge.jpg'); 
    background-repeat: repeat-x; 
    background-position: top; 
    margin: 0; 
    position: relative; 
} 

.whole-page { 
    width: 1000px; 
    margin: auto; 
    padding: 0; 
    text-align: left; 
    position: relative; 
    border-radius: 0 0 15px 15px; 
} 

.header { 
    width: 100%; 
    height: 120px; 
    color: white; 
    background-image: url('/images/header.jpg'); 
    background-repeat: no-repeat; 
    font-size: 10pt; 
    margin-top: 0px; 
    margin-bottom: 0; 
    padding-top: 10px; 
    border: 1px black none; 
    position: relative; 
}

上面的CSS工作，除非出现一个工具栏。我使用的是Chrome工具栏，它正确地取代了居中的页眉图像，并将其压入工具栏下方，以便我可以看到整个图像。

但是，重复的身体图像根本没有移位，并且工具栏覆盖了如此之多的像素。这使整个事情摆脱困境。

我试过了CSS中的几个选项，但到目前为止似乎没有任何工作。我在这里猜测，但我认为工具栏使用body标签下的“存在”CSS来绘制自己。

任何人都可以提出任何建议，我希望整个标题被推下或不。就是这样一致。

来源

2013-02-21 John Judd

“与SEO工具栏Chrome浏览器” 是一个有点含糊。那里可能有不止一个SEO工具栏。请哪个工具栏？所以我们有一些复制问题的机会。 – 2013-02-21 04:00:16

这是seququake工具栏，它适合在页面内，并与它滚动。但是，我担心这也可能是其他工具栏的问题。 – 2013-02-21 04:08:08

使用Chrome开发人员工具（点击f12），您可以检查（单击底部的放大镜图标）工具栏元素。这样做，你可以看到它确实插入到文档的主体。这将不幸地导致你所看到的实际行为。换句话说，这不是你的错，而是工具栏开发者的错。

一个（丑陋的）解决方法是在您的内容中添加一个额外的div，并将背景应用到该内容。

E.G.

HTML

<body> 
    <div id="notBody"> 
     <!--Rest of your headers, content, etc here --> 
    </div> 
</body>

CSS

body { 
font-family: Tahoma; 
background-color: #0184AE;  
margin: 0; 
position: relative; 
} 


#notBody { 
background-image: url('/images/headeredge.jpg'); 
background-repeat: repeat-x; 
background-position: top; 

}

来源

2013-02-21 04:30:48

谢谢。尽管这是一个丑陋的解决方法，但仍然奏效。 ;-) – 2013-02-21 04:43:23

在您的标题类更改为position: absolute;并使用top来设置您希望您的标题从页面顶部有多少像素。

.header { 
    position: absolute; 

    /* all your other styles */ 

    top: 200px; 
}

来源

2013-02-21 03:42:07

谢谢，但不幸的是，这并没有奏效。标题完全消失。我尝试绝对0px和200px，没有区别。 – 2013-02-21 04:14:55

浏览器工具栏干扰CSS标题区域

回答

相关问题