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

Extra padding on Chrome/Safari/Webkit -- any ideas?

提问by pepe

My page has this extra padding on the top of page that I'm unable to remove. Tried everything under the sun and hope someone can show me the way.

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

Any ideas?

有任何想法吗？

采纳答案by Andrew Vit

Your page has an element near the top with a top-margin that extends outside your page wrapper. If you have this:

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

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

Then the .sectionelement will be positioned at the top of the .wrapperand its 40px margin will extend out the top. This has to do with the way margins collapse together so that two margins between elements don't accumulate. You can prevent this by adding overflow: hiddenon the wrapper.

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

In your markup, it's the .mini-searchelement that has a 40px top margin. Either remove this margin, or add overflow: hiddenon the fieldset that contains it.

在您的标记中，它.mini-search是具有 40px 上边距的元素。要么删除此边距，要么添加overflow: hidden包含它的字段集。

回答by Filipp Yanukovich

The WebKit styles sheet contains the following: 'margin' and 'padding' properties:

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:

Enjoy

享受

回答by Horacio Nu?ez

Use this css code:

使用这个 css 代码：

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

The issue you comment is because the user agent style, I learn about it inspecting the body tag with the browser tool. You should track down the element styles on a navigator using the tools it provides (now all the importants include a DOM inspector) so you can demystify the non-standard behavior.

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

I know you dont ask for it but talking about WebKit stuffs, i paste a code for getting rounded borders on every browser but IE.

我知道你不要求它但谈论 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*/
}

回答by WalterJ89

i trust you have done:

我相信你已经做到了：

body {padding :0; margin:0}

by default the body tag has padding.

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

回答by Kaja

It is, in my opinion, caused by an EMBED element added by some plugin just after the HTML opening tag*(check "right click > inspect element" to see if it is really there). If yes, there are basically two options to follow:

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

1. disable/remove the pluginwhich is responsible for adding the element; (preferred, as it's global)
2. insert embed{display:none}into your style sheet.

1. 禁用/取出插件，其是负责添加元素; （首选，因为它是全球性的）
2. 插入embed{display:none}到您的样式表中。

---

---

*This was my case - the plugin called default pluginand both disabling & removing helped solve the issue.

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

回答by Jeremy Smith

This works with IE (at least IE v10 in my tests):

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

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

The bottom one is the one that works for IE 10, just keeps all the dimensions to what you set a selector/element to be in the width and/or height.

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

回答by David Lux

I had the same problem with my nav that has a padding and contains buttons. Overflow:hiddendid work, but it also cut the buttons off, because they had a padding that crossed the border of the navs height. So I tried overflow:visibleand that worked just fine for me.

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

回答by Eric Wendelin

I'm able to fix it by removing the rule:

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

* { padding: 0 } 

From your CSS. I'm not sure what that's breaking, but that is the cause.

从你的 CSS。我不确定那是什么破坏，但这就是原因。

回答by Omar Al-Ithawi

Always include the YUI reset css file.

始终包含 YUI 重置 css 文件。

and: body, html {padding: 0; margin:0}that's it!

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