동일한 CSS 코드이지만 다른 출력

Question

여기 하나의 파일이 있습니다.

<div id="banner"> 
<div id="bannerTextBlue"> <h1> lorem ipsum </h1> </div> 
<div id="bannerTextYellow"> <h1> dolor sit amet. </h1> </div> 
</div> 

을 그리고 내 CSS는 이것이다 :

내 HTML이처럼 보였다

#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 글꼴과 다른 글꼴 인 경우 결과가 달라집니다.

최소 글꼴 크기도 있지만 여기서는 예제에 문제가되지 않을 것으로 생각됩니다.