0

我这里有一个文件。

我的 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结构有问题吗？

4

3 回答 3

0

有时，浏览器之间存在差异。检查 Firefox 的版本。我不确定这是否可行，但请尝试安装更新版本的 Firefox。或者为了确保它可以随时随地工作，任何浏览器都有一个浏览器数据包（我不确定这个术语），但它会确定用户的浏览器，它会自动调整到用户的浏览器。希望这可以帮助。

于 2012-04-25T09:00:18.917 回答
0

你确定你想要一个font-size比 更大的line-height吗？

这使得第二行（在蓝色框中）与第一行重叠......（如果这就是你的意思破坏）

（但在所有浏览器中都会发生相同的情况..）

于 2012-04-25T08:57:15.720 回答
0

Differences between browsers can be caused by the default settings in those browsers.

You're not specifying a font, so if FF has a different default font than Chrome, the result will be different.

There is also the minimum font size, but I guess that won't be a problem with your example here.

于 2012-04-25T09:18:20.810 回答