上边距 0 不起作用？缓存问题？答案

【问题标题】：Topmargin 0 not working? Caching issue?上边距 0 不起作用？缓存问题？
【发布时间】：2014-08-16 09:07:11
【问题描述】：

我似乎无法让我的margin-top:0; 属性在我的样式表中工作。我不知道为什么，但是当我清除浏览器的缓存时，该属性将暂时起作用，然后立即返回在我的页面顶部留下一个空间（看看：www.sunporchhomes.com）。我正在使用 Wordpress 进行构建。这是我的代码的上半部分，任何帮助将不胜感激。

CSS

body
{
margin:0;
padding:0;
background-image:url("http://www.sunporchhomes.com/sphbg5.png");
}

a:link {color:#ffffff;}      /* unvisited link */
a:visited {color:#ffffff;}  /* visited link */
a:hover {color:#808080;}  /* mouse over link */
a:active {color:#ffffff;}  /* selected link */

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}

#logo {
    margin: 0;
    width: 1000px;
    z-index: 26;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
}

#header {
    width: 1000px;
    height: 175;
    position: absolute;
    top: 0;
    left: 0;
    padding-left:70px;
}

#banner {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            width: 100%;
            height: 419px;
            z-index: -1;
        }

#navigationtable {
    position:absolute;
    padding-left:730px;
    z-index: 10;
    padding-top:20px;
}

HTML

<body>

<div id="wrapper" class="hfeed">

   <img id="banner" src="http://sunporchhomes.com/spmain1.png" alt="Banner Image"/>

       <div id="navigationtable">
<table class="tg" width="400">
  <tr>
    <th class="tg-lhfu"><a href="http://sunporchomes.com">HOME</a></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"><a href="http://sunporchhomes.com/warranty.html">WARRANTY</a></th>
    <th class="tg-031e"></th>
  </tr>
 <tr>
    <th class="tg-lhfu"><a href="http://sunporchhomes.com/features-3.html">FEATURES</a></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"><a href="http://sunporchhomes.com/faq-2.html">ROWHOME FAQ</a></th>
    <th class="tg-031e"></th>
  </tr>
 <tr>
    <th class="tg-lhfu"><a href="http://sunporchhomes.com/floor-plan-2.html">FLOORPLAN</th>
    <th class="tg-031e"></th>
    <th class="tg-031e"><a href="http://sunporchhomes.com/about.html">ABOUT US</a></th>
    <th class="tg-031e"></th>
  </tr>
 <tr>
    <th class="tg-lhfu"><a href="http://sunporchhomes.com/neighbourhood.html">NEIGHBOURHOOD</a></th>
    <th class="tg-031e"></th>
    <th class="tg-031e"><a href="http://sunporchhomes.com/contact.html">CONTACT</a></th>
    <th class="tg-031e"></th>
  </tr>

</table>
</div>

 <div id="boxplus">
 <img src="http://sunporchhomes.com/boxplus.png" />
 </div>

 <div id="logo">   
    <img src="http://sunporchhomes.com/splogo13.png" /> 

    </div>
 </div>

【问题讨论】：

您的 css 有 .wrapper，您的 html 有 id="wrapper" - 应将 css 更改为 #wrapper 以正确处理该元素。
上边距应用在哪里？
另外，您已将 nav 设置为 position:absolute - 因此您的 padding-left 和 padding-right 对定位没有用（这似乎是您使用它们的方式）
哪个浏览器导致了这个问题？在 FF 和 Chrome 中为我正常工作。

标签： css wordpress margin

【解决方案1】：

您遇到的问题不是您的 CSS，而是您的 WordPress 管理栏。

当您登录 WordPress 时，它会尝试“强制”在浏览器窗口的顶部 32 像素上绘制一个管理栏。

当您的 css 与 WP 尝试执行此操作的方式发生冲突时（由于您大量使用 position: absolute，我相信您的 css 确实），您可以在顶部而不是管理栏。

您可以通过编辑您的用户个人资料并取消选中“查看站点时显示工具栏”来禁用管理栏

我已经在 Firefox、Chrome 和 Internet Explorer 中进行了测试 - 它们都可以正确呈现您的网站，而没有您描述的空间。

【讨论】：