网页上的神秘边距答案

【问题标题】：Mysterious margins on webpage网页上的神秘边距
【发布时间】：2016-08-19 14:14:14
【问题描述】：

我正在开发一个 Wordpress 主题，并注意到整个页面被向下推了一点。我使用Chrome中的inspector查找问题，发现如下样式：

<style type="text/css" media="screen">
    html { margin-top: 32px !important; }
    * html body { margin-top: 32px !important; }
    @media screen and ( max-width: 782px ) {
        html { margin-top: 46px !important; }
        * html body { margin-top: 46px !important; }
    }
</style>

如果我在检查器中删除它，页面的主体会重新回到顶部。但这是奇怪的事情。我尝试删除我的整个样式表以查看问题是否出在 css 中，但问题仍然存在。所以我猜测 Chrome 必须添加这些行，但为什么呢？它在 IE 和 Edge 中运行良好。

编辑：我尝试在 Crome 中清除 css 缓存，但没有区别.. 编辑：我尝试将 css reset 添加到样式表但仍然没有区别...

CSS（相当杂乱，但正在进行中）：https://codeshare.io/sr0sg

【问题讨论】：

尝试添加：* { margin: 0 !important; padding: 0 !important } 看看会发生什么。如果填充/边距消失，则您的元素之一导致了问题。
谢谢！试过了。它确实把整个网页弄得一团糟，但它仍然没有删除神秘的代码。
如果你在你的 HTML 代码的头部添加这段代码会怎样？也许神秘的魔法发生在另一个 CSS 文件中？
其他浏览器也会出现这种情况吗？
我不认为 chrome 会添加这个...它会完成损坏的标签等，但不是新的样式规则！禁用插件，它在你的代码 id 中说。一个方便的方法是查看源代码并将其与检查器中的渲染输出进行比较 - 即，如果代码在查看源代码中，则不是 chrome 添加它。它可能对 chrome 等有条件。

标签： css wordpress wordpress-theming

【解决方案1】：

这个问题有点老了，但建议的解决方案太激烈了。我建议维护管理栏并删除奇怪的 CSS。

这可以用这个sn-p来完成：

add_action('get_header', 'remove_admin_bar_weird_css');
function remove_admin_bar_weird_css() {
    remove_action('wp_head', '_admin_bar_bump_cb');
}

【讨论】：

像魅力一样工作，管理栏仍然可用。应该是国际海事组织接受的答案

【解决方案2】：

尝试将此添加到您的 functions.php 文件中：

add_filter('show_admin_bar', '__return_false');

您在上面突出显示的 CSS 是 WP 添加的，以便为 WordPress 管理栏腾出空间。您还可以通过转到管理区域中的用户>您的个人资料>“编辑站点时显示工具栏”来隐藏管理栏。

【讨论】：

谢谢！那解决了！自从我开始制作浮动 div 以来，我一直遇到管理栏掩盖内容的问题。虽然这是一种激进的方法，但它解决了问题。