Question

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

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

如果您在firefox和chrome中查看网站，则可以看到间距不同。它在chrome中的外观是我的意思。

我已尝试在YUI 2中进行链接：按照另一个问题的建议重置CSS，但我似乎无法让它工作。

以下是样式表链接：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;
}

使绿色按钮更好，所以你可以用同样的方式与其他人玩耍。

Chrome和Firefox中的间距不同

2 个答案: