Chrome/Safari/Webkit的额外填充-有什么想法吗?

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

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

然后 .section 元素将位于 .wrapper 它的40px的边缘将延伸到顶部。这与页边距折叠在一起的方式有关,这样元素之间的两个页边距就不会累积。您可以通过添加 overflow: hidden 在包装纸上。

在您的标记中,它是 .mini-search 元素的上边距为40px。要么删除此页边距,要么添加 溢出:隐藏 在包含它的字段集上。

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:

享受

使用此CSS代码:

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

您评论的问题是因为用户代理样式,我了解到它使用浏览器工具检查body标签。您应该使用导航器提供的工具(现在所有导入者都包括一个DOM检查器)跟踪导航器上的元素样式,这样您就可以解除非标准行为的神秘化。

我知道你不要求,但说到网络工具包,我贴了一个代码 每个浏览器上都有圆形边框,但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*/
}

我相信你已经做到了:

body {padding :0; margin:0}

默认情况下,body标记有填充。

它是 ,在我看来,是由 某个插件在HTML开始标记后添加的嵌入元素* (选中“右键单击”>“检查元素”查看它是否真的存在)。如果是,基本上有两种选择:

1. 禁用/删除插件 哪个是 负责添加元素 (首选,因为它是全局的)
2. 插入 embed{display:none} 在样式表中。

*这是我的情况-插件调用 默认插件 同时禁用和删除功能有助于解决此问题。

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

* { padding: 0 } 

从你的CSS。我不知道这是怎么回事,但这就是原因。

始终包括yui reset css文件。

还有: body, html {padding: 0; margin:0} 就这样!

这适用于IE(在我的测试中至少是IE v10):

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

最下面的一个是适用于IE10的,只需将所有尺寸保持在您设置选择器/元素的宽度和/或高度。

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