Question

我有一个#header div，它有一个渐变背景。在该背景中，有网站的标识，以及底部的导航菜单。 #header div应该在浏览器之上 - 不是固定的，但没有任何填充/边距，否则会留下身体背景块。

这正是Chrome上发生的事情。而不是留在浏览器的顶部，就像是#pader中有30px的margin-top。有趣的是，它在Safari上完美运行，即它保持在浏览器的顶部。

这是我的代码：

        <div id = "header">

            <div id = "header-content">

                <p id = "logo"> Components </p>

                <div id = "menu-links-div">

                    <ul id = "ul-links">
                        <a href = "index.php"> <li class = "menu-links"> Home </li> </a>
                        <a href = "media.php"> <li class = "menu-links"> Media </li> </a>
                        <a href = "sobre.php"> <li class = "menu-links"> Sobre </li> </a>
                        <a href = "contato.php"> <li class = "menu-links"> Contatos </li> </a>
                    </ul>

                </div>  

            </div>

        </div>

CSS：

body {
   margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;
   box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; height:100%; -webkit-font-smoothing:subpixel-antialiased; font-size:13px;
}

#header {
   display: inline-block;
   width: 100%;
   background: rgba(90,137,173,1);
   background: -moz-linear-gradient(left, rgba(90,137,173,1) 0%, rgba(195,223,245,1) 51%, rgba(90,137,173,1) 100%);
   background: -webkit-gradient(left top, right top, color-stop(0%, rgba(90,137,173,1)), color-stop(51%, rgba(195,223,245,1)), color-stop(100%, rgba(90,137,173,1)));
   background: -webkit-linear-gradient(left, rgba(90,137,173,1) 0%, rgba(195,223,245,1) 51%, rgba(90,137,173,1) 100%);
   background: -o-linear-gradient(left, rgba(90,137,173,1) 0%, rgba(195,223,245,1) 51%, rgba(90,137,173,1) 100%);
   background: -ms-linear-gradient(left, rgba(90,137,173,1) 0%, rgba(195,223,245,1) 51%, rgba(90,137,173,1) 100%);
   background: linear-gradient(to right, rgba(90,137,173,1) 0%, rgba(195,223,245,1) 51%, rgba(90,137,173,1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a89ad', endColorstr='#5a89ad', GradientType=1 );
}


#logo {
   text-align: center;
   font-size: 7.5em;
   margin-top: 105px;
   font-family: Alien;
}

#header-content {
   margin: 0 auto;
}

标题div不会停留在Chrome浏览器的顶部

0 个答案: