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 }

如果这不适合你，那么其他因素会对此产生影响，但是，除非你展示完整的标记，否则我们说的任何内容都只是猜测。

段落渲染在Chrome和＆amp;火狐

2 个答案: