这些行之间的空格在浏览器之间有所不同,并且行高似乎无法修复它

时间:2014-11-06 23:47:51

标签: html cross-browser css

我的标题('标题')和副标题(' subh')在不同的浏览器中以不同的垂直间距显示。在Firefox中,它以我想要的方式显示,但在Safari和Chrome中,存在巨大差距。![Safari和Chrome示例] [1]

我已经尝试了行高属性,它没有修复任何东西,我已经用百分比,分数和负数来尝试它(我不知道负面做什么)。

这是我的CSS。如果它在风格上不正确,我很抱歉,因为我上个月才开始使用HTML。显然我的形象也不会出现,所以我希望我能够充分描述它。

header { background-color: white; float: left; font-family: "Arvo"; font-size: 300%; padding: 0 0 0 0; position: relative; top: 0; width: 100%; } subh { background-color: white; color: #33CC33; float: left; font-family: "Josefin Slab"; font-size:200%; padding: 0 0 0 0; position: relative; top: 7.5%; width: 100%; }

2 个答案:

答案 0 :(得分:1)

我认为不同的浏览器可能会处理您的拼写错误:

font-size:300 %%;

不同。删除额外的%。

答案 1 :(得分:0)

我刚刚意识到出了什么问题,我有点惭愧。将位置设置为“相对”的组合。并且拥有不同的顶级'价值造成了差距。我仍然不知道为什么在不同的浏览器中显示的不同,但似乎是这种情况。我想我最初已将它们设置为“修复”。

我已经将标题和副标题的最高值设置为0。