html - 相同的CSS代码，但输出不同

我这里有一个文件。

我的html看起来像这样：

<div id="banner">
<div id="bannerTextBlue"> <h1> lorem ipsum </h1> </div>
<div id="bannerTextYellow"> <h1> dolor sit amet. </h1> </div>
</div>

我的CSS是这样的：

#banner{
  background: #FFF;
  width: 1140px;
  margin:30px auto 0;
  border: 12px solid #323232;
  height: 448px;
  position:relative;
}

#bannerTextBlue{
  height: 90px;
  background: #027cd6;
  width: 600px;
  right: 0px;
  position: absolute;
  padding-left: 90px;
}

#bannerTextBlue h1{
  color: #FFFFFF;
  font-size: 88px;
  line-height: 50px;
  padding-right: 30px;
  text-transform: uppercase;
}

#bannerTextYellow{
  height: 60px;
  background: #f4b437;
  width: 500px;
  right: 0px;
  top: 100px;
  position: absolute;
  padding-left: 10px;
}

#bannerTextYellow h1{
  color: #FFFFFF;
  font-size: 50px;
  line-height: 35px;
  padding-right: 30px;
  text-transform: uppercase;
}

但是输出是不同的。它在Chrome浏览器中看起来还不错，但在Firefox中却被销毁了。不确定这里的故障在哪里。请帮忙？我的CSS结构有问题吗？

最佳答案

您确定要font-size大于line-height吗？

这会使第二行（在蓝色框中）与第一行重叠...（如果这是您的意思，则表示已销毁）

（但在所有浏览器中都一样。）

关于html - 相同的CSS代码，但输出不同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10312304/