相同的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結構有什麼問題嗎？

來源

2012-04-25 woninana

對我來說很好。什麼是問題？ - 你的代碼作爲一個可執行的樣本：http://jsfiddle.net/WwNdp/ – Smamatti 2012-04-25 08:52:37

其在所有瀏覽器上看起來都一樣，所以你可以告訴我們究竟是什麼問題.... – 2012-04-25 08:55:05

有什麼區別？我沒有看到任何誠實。 – ogur 2012-04-25 08:55:06

你確定你想要font-size大於line-height？

這使得（在藍盒子）第二線重疊的第一...（如果這是你的意思與破壞）

（但它發生在同一所有瀏覽器..）

來源

2012-04-25 08:57:15

有時候，瀏覽器之間存在差異。檢查您的Firefox的版本。我不確定這會起作用，但嘗試安裝更新版本的Firefox。或者爲了確保它隨時可用，並且有任何瀏覽器，都有一個瀏覽器包（我不確定這個術語），但它會確定用戶的瀏覽器，並且會自動調整到用戶的瀏覽器。希望這可以幫助。

來源

2012-04-25 09:00:18 OnMyLearningProcess

瀏覽器之間的差異可能是由這些瀏覽器中的默認設置引起的。

您沒有指定字體，所以如果FF的默認字體不是Chrome，則結果會有所不同。

還有最小字體大小，但我想這不會成爲你的例子在這裏的問題。

來源

2012-04-25 09:18:20

相同的CSS代碼，但不同的輸出

回答

相關問題