Question

我正在使用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进行额外填充的原因的任何帮助/建议吗？

谢谢！ SIDD。

- 这也是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 -->

Answer 1

使用CSS重置来避免此类问题。 CSS重置对于消除不一致的边距，填充，线高和其他可能导致您的网页在各种浏览器中以不同方式显示的属性非常重要。创建一个不同的CSS文件，并将其命名为“reset.css”，并使用

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

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

转到此link以获取现成的重置CSS文件以及here所有有关CSS重置的更多信息。

Answer 2

对于发现reset.css不起作用的任何人，我发现它有助于在浏览器之间显示不一致填充的元素上设置高度。我可以看到Chrome和Safari之间的填充有很大的不同，这就解决了这个问题。

Chrome，Firefox + Safari之间的CSS Padding变体

2 个答案: