html - 由于 li 填充，Chrome 和 Opera 在顶部留下了空白空间

Question

我正在制作带有整页 slider 的主页。在 Firefox 一切顺利!在 Chrome 和 Opera 中，我在页面顶部有一个空白区域。

我注意到所有空间都来自菜单填充 (li)，当我将其设置为 0 时，空间变短但没有离开。

这是我的html

 <ul id="connect">
    <li>
    logo
    </li>
</ul>
<ul id="menu">
    <li>menu1</li>
    <li>menu2</li>
    <li>menu3</li>
    <li>menu4</li>
</ul>

我的CSS是

#connect {
z-index: 10;
position: fixed;
width: 100%;
list-style: none;
margin: 0;
margin-left: 90px;
padding: 20px;
}


#menu {
z-index: 10;
float: right;
margin: 0;
font-size:12px;
list-style: none;
position:relative;
top:30px;
right:20px;
font-family: 'Open Sans', sans-serif;
}

li {

    display:block;
    float: left;
    padding: 10px;
}

有人可以帮忙吗？

Answer 1

我会像这样重写你的代码，让它更简单和语义化:http://jsfiddle.net/kc4umn1c/

每当您使用“position: fixed”时，您还应该指定 X/Y 坐标(在本例中为“left/right”)。我添加了以下样式。

此外，考虑使用 reset.css 文件使您的所有样式在浏览器之间很好地适应。 (谷歌 html5 样板，他们有一个很好的样板。)

祝你好运!

HTML

    <header class="header">
        <h1 class="logo">logo</h1>

        <nav class="menu">
            <ul>
                <li>menu1</li>
                <li>menu2</li>
                <li>menu3</li>
                <li>menu4</li>
            </ul>
        </nav>
    </header>

CSS

    * { margin: 0; padding: 0; box-sizing: border-box; }

    .header {     
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        background: black;
        z-index: 1;
        padding: 20px;
        color: white; 
    }

    .logo { 
        float: left; 
        display: inline-block; 
    }

    .menu {
        float: right;
        display: inline-block;
        color: white;
    }

    .menu ul {
        list-style: none;
    }

    .menu ul li {
        float: left;
        padding: 10px;
    }