0

ここに 1 つのファイルがあります。

私の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

ブラウザ間の違いは、それらのブラウザのデフォルト設定が原因である可能性があります。

フォントを指定していないため、FFのデフォルトフォントがChromeと異なる場合、結果は異なります。

最小フォントサイズもありますが、ここでの例では問題ないと思います。

于 2012-04-25T09:18:20.810 に答える
0

font-sizeよりも大きい が必要ですline-heightか?

これにより、2 行目 (青いボックス内) が最初の行と重なります... (それが破棄された場合)

（ただし、すべてのブラウザで同じことが起こります..）

于 2012-04-25T08:57:15.720 に答える
0

ブラウザ間で違いがある場合があります。Firefox のバージョンを確認します。これが機能するかどうかはわかりませんが、新しいバージョンの Firefox をインストールしてみてください。または、いつでもどのブラウザーでも機能することを確認するために、ブラウザーパケットがあります (用語についてはわかりません) が、ユーザーのブラウザーを決定し、ユーザーのブラウザーが何であるかに自動的に調整されます。お役に立てれば。

于 2012-04-25T09:00:18.917 に答える