Chrome、Firefox + Safari 之间的 CSS 填充变化答案

【问题标题】：CSS Padding variations between Chrome, Firefox + SafariChrome、Firefox + Safari 之间的 CSS 填充变化
【发布时间】：2012-03-24 19:29:50
【问题描述】：

我正在使用 font-face + CSS。文本填充在大多数浏览器中看起来都很好，除了 Mac 上的 Safari 和 Chrome，它使用额外的 20px 左右渲染顶部填充......这是有问题的 CSS 片段：

        p.style10 {font-family: 'TitilliumText22LThin', Arial, sans-serif; font-size: 17px; line-height: 19px; color: #FFFFFF; padding: 20px 40px 10px 10px}

这是它在 Chrome/Safari (Mac) 中的错误显示方式：http://siddharthkhajuria.com/srv/chrome.png

在 Firefox (Mac) 中正确：http://siddharthkhajuria.com/srv/firefox.png

关于为什么它在 Mac 上的 Chrome/Safari 中出现带有额外填充的任何帮助/建议？

谢谢！西德。

-- 这里也是 html 的相关部分：

<!-- START OF PROMOS 1 -->

<div class="g320" style="background-image:url(img/p1.png);
width:310px;
height:354px;
overflow:hidden;">

<p class="style9"><strong>'Bootylicious' by Tom Rosenthal</strong><br /><br />A video for Tom's reworking of the Destiny's Child classic. I directed (with Tom), filmed and edited it.<br /><br /><br /></p>

<p class="style10"><strong>BBC at the Edinburgh Fringe</strong><br /><br />I produced the website for the BBC at the 2011 Fringe Festival. I also made a range of films and took photos on-site throughout the fortnight.</p>

</div>

<div class="g640">
<iframe src="http://player.vimeo.com/video/37423313?title=0&amp;byline=0&amp;portrait=0" width="630" height="354" frameborder="0"></iframe>
</div>

<div class="g320"></div>
<div class="clear">&nbsp;</div>

<!-- END OF PROMOS 1 -->

【问题讨论】：

同时显示相关的 HTML。很多时候，浏览器的差异可能意味着 HTML 格式错误。尝试验证您的代码。
啊，谢谢——刚刚添加进去了。
为避免此类问题，您应该使用 css 重置。 meyerweb.com/eric/tools/css/reset

标签： css font-face padding

【解决方案1】：

对于任何发现 reset.css 不起作用的人，我发现它有助于为在浏览器之间显示不一致填充的元素设置高度。我可以看到 Chrome 和 Safari 之间的填充有很大差异，这修复了它。

【讨论】：

【解决方案2】：

使用 CSS 重置来避免此类问题。 CSS 重置对于删除不一致的边距、填充、行高和其他可能导致您的网页在不同浏览器中看起来不同的属性非常重要。创建一个不同的 CSS 文件并将其命名为“reset.css”，然后使用

将其添加到所有其他 CSS 文件链接的顶部

<link rel="stylesheet" href="your_domain/css/reset.css">

转至link 以获取现成的重置 CSS 文件，并在here 获取更多关于 CSS 重置的信息。

【讨论】：