Chrome 和 Firefox 中的段落渲染差异

Question

我有一个段落在 chrome 和 firefox 中显示不同。在 chrome 中，我看到样式是由用户代理应用的。

p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

我尝试覆盖这些样式，但对渲染仍然没有影响。有没有办法可以否定差异。以便它们在两个浏览器中以相同的方式呈现。

http://jsfiddle.net/hozefa/hM4Rx/

chrome 中的计算标记

color: rgb(102, 102, 102);
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
height: 95px;
line-height: 19px;
margin-bottom: 13px;
margin-left: 0px;
margin-right: 0px;
margin-top: 3px;
text-shadow: rgb(255, 255, 255) 0px 1px 0px;
width: 526px

FF 中的计算标记

font-family Arial,​Helvetica,​sans-serif
font-size   14px
color   #666666
line-height 19px
margin-top  3px
margin-right    0px
margin-bottom   13px
margin-left 0px
text-shadow #FFFFFF 0px 1px 0px

Answer 1

使用css reset 到override 浏览器默认样式。

Example using Eric Meyer’s reset

或者您可以尝试使用!important。

甚至修改这些样式：

p{
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

Answer 2

每个用户代理（浏览器）都有自己的内置样式。您看到的是 Chrome，但 Firefox 也有他们的，在这种情况下，与 Chrome 的相同，您可以在他们的开发人员工具中查看。

您覆盖它们的方式是将它们设置为您想要的，两个浏览器都会遵守。

p { margin:1em }

如果这对您不起作用，则其他因素正在影响此，但除非您显示完整的标记，否则我们所说的任何内容都只是一个疯狂的猜测。