同じCSSコードですが異なる出力

Question

私はここに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; 
} 

しかし、出力が異なっています。それはクロームのように見えるはずだったが、Firefoxでは消えてしまう。ここで不具合がどこにあるかわからない助けてください？私のCSS構造に何か問題がありますか？

Answer 1

font-sizeをline-heightより大きくしてもよろしいですか？

（それはあなたがを破壊しで何を意味するかである場合）これは...最初に重なるように二行目（青箱で）を行う

（が、それは同じ起こりますすべてのブラウザ..）

Answer 2

時には、ブラウザによって違いがあります。 Firefoxのバージョンを確認してください。私はこれがうまくいくとは思っていませんが、新しいバージョンのFirefoxをインストールしようとします。または、いつでもすべてのブラウザが動作することを確認するために、ブラウザのパケットがありますが（私はその用語についてはわかりませんが）、ユーザーのブラウザを決定し、ユーザーのブラウザに自動的に調整されます。お役に立てれば。

Answer 3

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

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

最小フォントサイズもありますが、ここではあなたの例に問題はありません。