Question

我正在创建一个基于二十四岁的wordpress儿童主题。

<body class="home page page-id-2 page-template-default logged-in admin-bar no-customize-support single-author">
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<a href="http://www.s2e.ee-web.co.uk/">
 <img src="http://www.s2e.ee-web.co.uk/wp-content/themes/s2e/images/space-to-earth-challenge-logo.jpg" alt="Space to Earth Challenge logo " class="s2e-logo" /></a>
<div class="edclearer"></div>
</header><!-- #masthead -->
<div id="topmenubar">
    <div class="topmenucontent">
        <p>hello</p>
    </div><!--topmenucontent-->
</div><!--topmenubar-->

当我将margin-top:40px放到#topmenubar上时，整个站点从顶部向下移动 - 当我使用firebug切换边缘时，整个站点锁定到顶部。注意到这在IE中很好，但在FF

中没有

为什么在顶部反映的#topmenubar上留有余量？我该如何阻止它？

由于

这是我的CSS

* {
    margin:0;
    padding:0;
}

html {
    margin:0;
    padding:0;
}

body {
    font-family:Arial;
    color:#fff;
    line-height:1.3;
}

.edclearer {clear:both;}

h1, h2, h3, h4, h5, h6 {
    font-family:Arial;
    color:#fff;
    font-weight:bold;
}

header, #main, footer
 {
    width:1170px;
    margin:0 auto;
}

#main { 
    background:none;
}

#navbar {
    display:none;
}

.site {
    background:none;
    margin:0;
    border:none;
}

#main {
    background:orange;
}

/* --- header --- */

.s2e-logo {
    float:left;
}

.headertext {
    width:400px;
    float:left;
    margin-top:110px;
    margin-left:74px;
    margin-left:6.3%;
    width:700px;
    width:65%;
}

.headertext p {
    font-family:'Oswald', serif;
    font-weight:400;
    color:#fff;
    line-height:1.5;
    font-size:26px;
}

.headerrightblock {
    float:right;
    margin-top:35px;
    text-align:right;
    width:200px;
    width:13.6%;
}

.sm-logo {
    margin-left:11px;
    display:inline-block;
}

.sm-logo:first-child {
    margin-left:0;
}

.principa-logo {
    float:right;
    margin-top:50px;
}

Answer 1

如果你给标题增加一定的高度（甚至是100％），其次，添加溢出隐藏值 - 它应该为Firefox修复它。

尝试以下CSS：

.site-header {
    height: 100%;
    overflow: hidden;
    position: relative;
}

Answer 2

问题在于徽标，因为你是漂浮它，而你不需要浮动它。浮动导致中断布局。小心这个。右浮动元素很好，这是因为我不删除它们。这是小提琴：

http://jsfiddle.net/s9utbzyr/

代码只从徽标中删除浮动：

  .s2e-logo {
  }

如果您不希望该元素的行为简单display:inline-block，则可以向其添加inline。

一个div的边际似乎影响整个网站

2 个答案: