-webkit-margin在文本上添加了不必要的边距
这直到现在还没有打到我(这不仅在webkit浏览器中)。 在类似p
标签, h1
标签等的所有文本中,文本上方和下方都有一个额外的空间。
在铬我发现这一点:
用户代理样式表
-webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px;
这使得一些地方的alignment错误。 是的,我正在使用重置样式表,没有填充或边距被添加。 几乎是一个基本的设置。 为什么是这个,我该如何解决呢?
您也可以直接修改这些属性,如下所示:
-webkit-margin-before:0em; -webkit-margin-after:0em;
适用于Chrome / Safari。 希望有所帮助!
这些-webkit-margin
将被margin: 0; padding: 0;
覆盖margin: 0; padding: 0;
margin: 0; padding: 0;
。 别担心。
额外的空间? 也许你已经设置了line-height:
?
我遇到过同样的问题。 在Firefox中正确显示,但不是Chrome。
我仔细看了一下http://meyerweb.com/eric/tools/css/reset/ ,发现我的样式表中没有为body标签声明一个通用的行高。 将其设置为1.2,并在两个浏览器中重新创build正确的布局。
我有同样的问题。 菜单链接之间有额外的空间 没有上述解决scheme的工作。 什么对我有用,是负利润率。 只要做这样的事情:
margin: 0 -2px;
新编辑:
这与-webkit-margin没有任何关系。 内联元素很可能会出现问题。 发生这种情况是因为在内联元素之间有空格或换行符。 要解决这个问题,你有很多select:
- 删除内联元素之间的所有空格和换行符
- 跳过元素结束标记 – 例如
</li>
(HTML5不关心) - 负边际(如上所述 – IE6 / 7的问题 – 谁在乎,升级;)
- set
font-size: 0;
到有问题的内联元素容器(与Android有问题,如果与EMS字体大小) - 放弃内联和使用浮动(这样你松散的文本alignment:中心)
CHRIS COYIER更具体的解释和例子
只要删除标签之间的空白,例如
<p id="one"></p> <p id="two"></p>
变为:
<p id="one"></p><p id="two"></p>
我的<h3>
标签有同样的问题。 我尝试设置margin:0;
,但它没有工作。
我发现我习惯性地使用//
注释掉我的css中的行。 我从来没有注意到它,因为它以前没有造成任何问题。 但是,当我在声明<h3>
之前使用//
时,导致浏览器完全跳过声明。 当我交易/**/
我可以调整余量。
这个故事的道德:总是使用适当的评论语法!
对我来说,照片是:
* {margin:0;padding:0;}
无论如何,Firefox(FF)和Google Chrome都将0.67em的利润率。 FF显示了其默认的边距,但划掉,但应用它。 GC显示其默认裕度(-webkit-margin-before …)未交叉。
我申请了
* {margin:0;padding:0; -webkit-margin-before: 0; -webkit-margin-after: 0;}
但无济于事,尽pipeGC现在显示了其违约边际交叉。
我发现,我也可以申请
line-height: 0;
要么
font-size: 0;
达到预期的效果。 如果我们假设,这是有道理的,边缘是0.67em型。 如果有人能够给出一个解释,为什么浏览器使我们的生活悲惨的应用行高依赖,不可移动的边距,我将非常感激。
对于我来说,这是一个40px的padding-start
导致这一点。 我做了以下工作:
ul { -webkit-padding-start: 0em; }
-webkit-margin-before: 0em; -webkit-padding-start: 0; -webkit-margin-after: 0em;
当我有这个确切的问题时,这解决了它。
我有同样的问题。 突然之间,我的三个表格单元格中包含数据的头部向下移动了一下。 我的问题是通过添加这个简单解决:
table td { vertical-align: top; }
看起来像“更高”样式表中的其他元素是告诉我的数据在单元格中心,而不是只停留在顶部。
我猜它只是愚蠢的,并没有真正的问题…但下一个读这个话题的人可能会有同样的愚蠢的错误,因为我:)
保重!
如果user agent stylesheet
正在踢,这是因为标签属性没有正确定义您的CSS样式表。
有可能是一个错字,被遗忘的括号或分号打破了你的样式表之前到达您的网页后面提到的标签属性设置或“需要”。
运行你的CSS通过错误检查,如CSS LINT,并修复最终检测到的错误。