본문 바로가기

Cross Browsing

Chrome과 Edege의 height 차이

원래 디자인
Level 2에 마우스를 올리면 Level 2 위쪽으로 1px이 줄어든 모습

 

 

원래 디자인은 첫 번째 이미지입니다.

그런데 Level 2라는 곳에 마우스를 올리면 Level 2 상단이 양옆보다 1px이 줄어든 것을 볼 수 있습니다.

 

메뉴바 차체에는 70px이라는 정확한 높이를 준 상태입니다.

그 위쪽의 배너는 요소들과 padding으로만 높이가 만들어진 상태였습니다.

 

오류 해결방법으로는 메뉴바의 background-color는 투명색인 상태였는데,

이 부분의 background-color를 흰색으로 넣어주는 것도 있었습니다.

 

하지만 오류의 원인을 찾아보기 위해 살펴보니 이 오류의 문제점은 메뉴바 위쪽의 배너에 있었습니다.

이 부분에 정확한 px값을 입력하니 문제가 해결되었습니다.

 

 

박스 전체의 높이를 지정
텍스트박스의 높이를 지정
텍스트의 line-height 높이를 지정

 

전체 높이값을 입력하거나, 텍스트가 있는 박스의 높이를 지정하거나,

텍스트의 line-height를 정확한 px로 지정하는 것 또한 오류를 해결하는 방법이었습니다.

 

제 생각에는 line-height를 브라우저마다 약간씩 다르게 표현하는 게 아닐까 생각하며,

모든 브라우저에서 똑같이 보이도록 하려면 한 개 정도는 정확한 px을 입력하는 게 좋은 듯하네요!