html - Chrome 和 Firefox 中的间距不同

Question

这是给我带来麻烦的页面的链接：

http://youtube.thegoblin.net/layoutfix/

如果您在 Firefox 和 chrome 中查看网站，您可以看到间距不同。它在 chrome 中的外观就是我想要的样子。

我已尝试在 YUI 2: Reset CSS as it as itSuggested in another question 中进行链接，但我似乎无法使其正常工作。

这是样式表链接：http: //youtube.thegoblin.net/layoutfix/styles/style.css

Answer 1

您应该更改某些包含文本的元素的行高。这些是您需要更改的某些（可能是全部）元素的行高：

#title: 56px
.yoText: 46px
#buttonTitle: 68px
#buttonText: 34px

Answer 2

看起来浏览器对您选择的字体的行高计算方式不同，因此line-height可以让它变得更好。

只是简短的例子，不是完整的修复：

#dl-button #buttonTitle {
   color: #37590B;
   float: right;
   font-family: "TallDark";
   font-size: 600%;
   line-height: 0.7;
   margin-right: 60px;
   margin-top: 20px;
   text-shadow: 1px 1px #BDF277;
}

使绿色按钮变得更好，因此您可以以同样的方式与其他人一起玩耍。