Html 相同的css代码但不同的输出
我这里有一个文件 我的html如下所示:Html 相同的css代码但不同的输出,html,css,Html,Css,我这里有一个文件 我的html如下所示: <div id="banner"> <div id="bannerTextBlue"> <h1> lorem ipsum </h1> </div> <div id="bannerTextYellow"> <h1> dolor sit amet. </h1> </div> </div> 但结果是不同的。它在Chrome上看起来还不错,
<div id="banner">
<div id="bannerTextBlue"> <h1> lorem ipsum </h1> </div>
<div id="bannerTextYellow"> <h1> dolor sit amet. </h1> </div>
</div>
但结果是不同的。它在Chrome上看起来还不错,但在Firefox上却被破坏了。不确定这里的故障在哪里。请帮忙?我的css结构有问题吗?您确定要
字体大小
大于行高
这使得第二行(蓝色框中)与第一行重叠。。。(如果这就是你所说的“销毁”)
(但在所有浏览器中情况都是一样的。)有时,浏览器之间存在差异。检查Firefox的版本。我不确定这是否有效,但请尝试安装一个新版本的Firefox。或者,为了确保它可以在任何时间和任何浏览器中工作,有一个浏览器包(我不确定这个词),但它将决定用户的浏览器,并自动调整到用户的浏览器。希望这有帮助。浏览器之间的差异可能是由这些浏览器中的默认设置造成的 您没有指定字体,因此如果FF与Chrome具有不同的默认字体,则结果将不同
还有最小字体大小,但我想这对您的示例来说不是问题。我觉得不错。有什么问题吗?--你的代码作为一个可执行的示例:它在所有浏览器上看起来都是一样的,所以你能告诉我们到底是什么问题吗……有什么区别?老实说,我看不出Chrome和FFooks有什么区别,我看不出FF和Chrome有什么区别。。。(文本超过其他文本..但两种情况下相同)
#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;
}