私はここに1つのファイルがあります。同じ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;
}
しかし、出力が異なっています。それはクロームのように見えるはずだったが、Firefoxでは消えてしまう。ここで不具合がどこにあるかわからない助けてください?私のCSS構造に何か問題がありますか?
私にはうまく見えます。どうした? - 実行可能なサンプルとしてのコード:http://jsfiddle.net/WwNdp/ – Smamatti
すべてのブラウザで同じように見えるので、正確に何が問題なのか教えてください。 –
その違いは何ですか?私は誰も正直ではないと思う。 – ogur