Chrome/Safari/Webkit 上的额外填充——有什么想法吗？答案

【问题标题】：Extra padding on Chrome/Safari/Webkit -- any ideas?Chrome/Safari/Webkit 上的额外填充——有什么想法吗？
【发布时间】：2011-04-17 06:57:17
【问题描述】：

我的页面顶部有这个额外的填充，我无法删除。在阳光下尝试了一切，希望有人能告诉我方法。

有什么想法吗？

【问题讨论】：

在 Chrome 和 Safari 中，我看到一些额外的填充不是在顶部而是在侧面，尽管它在 Chrome 中更明显。
始终使用 css 重置以最小化跨浏览器的差异
问题没有代码示例是无用的，曾经包含一个链接但是这个被删除了！

标签： css google-chrome safari padding

【解决方案1】：

WebKit 样式表包含以下内容： 'margin' 和 'padding' 属性：

-webkit-margin-before:
-webkit-margin-end:
-webkit-margin-after:
-webkit-margin-start:

-webkit-padding-before:
-webkit-padding-end:
-webkit-padding-after:
-webkit-padding-start:

享受

【讨论】：

【解决方案2】：

您的页面在顶部附近有一个元素，其上边距延伸到页面包装之外。如果你有这个：

<div class="wrapper" style="margin: 0">
  <div class="section" style="margin: 40px 0"> Stuff! </div>
</div>

然后.section 元素将位于.wrapper 的顶部，并且其40px 的边距将延伸到顶部。这与边距折叠在一起的方式有关，因此元素之间的两个边距不会累积。您可以通过在包装器上添加overflow: hidden 来防止这种情况发生。

在您的标记中，.mini-search 元素的上边距为 40 像素。要么删除这个边距，要么在包含它的字段集上添加overflow: hidden。

【讨论】：

万岁——安德鲁你成功了！从 .mini-search 中取出该死的边距并通过填充重新定位它，现在我可以走了。非常感谢！！！

【解决方案3】：

使用这个css代码：

/*Reset Safari User Agent Styles*/
* {-webkit-padding-start: 0px;}

您评论的问题是因为用户代理样式，我了解它使用浏览器工具检查正文标记。您应该使用导航器提供的工具（现在所有重要的工具都包括 DOM 检查器）在导航器上跟踪元素样式，以便您可以揭开非标准行为的神秘面纱。

我知道你不要求它，但谈论 WebKit 的东西，我粘贴了一个代码来获取除 IE 外，所有浏览器均采用圆角边框。

.rounded
{
-moz-border-radius:5px; /*works on Firefox */
-webkit-border-radius:5px; /*works on Safari and Google Chrome*/
border-bottom-radius: 5px; /*works on Opera*/
}

【讨论】：

【解决方案4】：

我相信你已经做到了：

body {padding :0; margin:0}

默认情况下，body 标签有填充。

【讨论】：

将此行添加到我的 css 中没有任何区别 - 感谢 walter 的评论

【解决方案5】：

这是，在我看来，是由某个插件在 HTML 开始标记之后添加的 EMBED 元素引起的*（选中“右键单击 > 检查元素”以看看它是否真的存在）。如果是，基本上有两种选择：

禁用/删除插件，该插件负责添加元素；（首选，因为它是全球性的）
将embed{display:none} 插入到您的样式表中。

*这是我的情况 - 名为 default plugin 的插件，禁用和删除都有助于解决问题。

【讨论】：

非建设性评论：您确定确实喜欢使用粗体。 =)
嗯，我只是想指出最重要的信息，以便那些不想阅读所有内容的人能够明白这一点。 :))
没关系，你最终会知道（至少我得出了这个结论）你发帖是为了帮助别人，而不是为了引起人们对你的回答的关注。需要帮助的人会阅读您的整篇文章。另一方面，如果您要发布问题，那么突出显示最重要的部分可能会有所帮助。

【解决方案6】：

我可以通过删除规则来修复它：

* { padding: 0 }

来自您的 CSS。我不确定这是什么问题，但这就是原因。

【讨论】：

我可以确认这行得通，但我也不知道为什么。使用 Chrome 内置的 DOM 查看器，您可以看到整个标记似乎都向下移动了，而不仅仅是标题。很奇怪。
所以我在这里推荐的只是使用 Eric Meyer 的 CSS 重置：meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded 而不是“* {margin:0; padding:0}”。 HTH
thx eric - 我也注意到了，但无法通过 css 修复它 - 但安德鲁发现了有问题的行，现在我很好 - 感谢评论

【解决方案7】：

始终包含 YUI 重置 css 文件。

和： body, html {padding: 0; margin:0} 就是这样！

【讨论】：

omar，这个也没有用——添加了你推荐的行但没有改变——尽管如此

【解决方案8】：

这适用于 IE（在我的测试中至少 IE v10）：

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

底部是适用于 IE 10 的，只是将所有尺寸保持为您设置选择器/元素的宽度和/或高度。

【讨论】：

【解决方案9】：

我的导航有同样的问题，它有一个填充和包含按钮。 Overflow:hidden 确实有效，但它也切断了按钮，因为它们有一个跨越导航高度边界的填充。所以我尝试了overflow:visible，这对我来说效果很好。

【讨论】：

【解决方案10】：

我创建了一个解决方法来解决 Chrome iOS 上的这个问题。简单来说，我将网页扩展到 iPhone 缺口之外的方法是放大页面，然后滚动到中间。

我的详细信息和代码可以在我的 github 上找到 https://github.com/anthonypena97/chromeios-viewportfitcover

【讨论】：