크롬 및 파이어폭스에서 친효스킨 아이콘이 살짝 밑으로 쏠린 현상 해결하기

안녕하세요. 친절한효자손입니다. 크롬 브라우저가 최근 업데이트가 되면서 파이어폭스랑 뭔가 상당히 비슷해졌다는것을 느끼고 있습니다. 기능상 문제는 아니고 HTML과 CSS를 표현함에 있어서 파이어폭스처럼 변화가 된 것 같습니다. 이 현상은 예전부터 알고있던 문제였는데 단순히 두 브라우저의 웹 엔진이 달라서 출력하는 방법에서의 차이일 뿐 기능은 이상 없다고 여겨져 사실상 그냥 무신경 상태로 방치했었어요. 왜냐하면 국내에서는 파폭보단 크롬을 사용하는 유저가 압도적으로 많기 때문입니다. 허나 이제는 크롬에서도 이러한 현상이 목격되고 말았습니다.

문제의 현상

친효스킨의 TOP버튼 세트 꾸러미 모습입니다. 보시면 아시겠지만 진한회색 박스 안의 폰트어썸 아이콘들이 살짝 아래로 내려가있는 모습을 보이고 있습니다.

친효스킨 오른쪽 상단의 메뉴 아이콘들도 마찬가지입니다. 뭔가 상대적으로 아래로 쏠려있습니다. 기능상 문제는 없는데 나름 UI 디자인을 중요시 여기는 제 눈에는 상당히 신경이 쓰이는 부분이었습니다. 태그상 문제는 전혀 없는데 말입니다. 그래서 이 부분을 임시 방편으로 해결하는 방법을 안내해 드립니다. 다시 한 번 말씀 드리지만 기능상 문제는 없는 부분입니다. 그냥 보기가 좀 그래서 수정하려는 것 뿐입니다. 따라서 보여지는건 아무래도 상관 없다고 생각하시는 분들은 이 글을 읽으실 필요는 없으십니다.

수정 방법

관리자 > 스킨 편집 > HTML 편집 > CSS로 들어갑니다. 그리고 아래의 코드를 적당한 위치에 삽입합니다.

/* 폰트어썸 위치조정 */
header .menu .button a i {
    position: relative;
    top: -4px;
}

header .menu .search i,
#topBtn i {
    position: relative;
    top: -2px;
}

이 CSS 코드는 헤더와 TOP버튼 세트에 사용되어지는 폰트어썸 아이콘들의 절대 위치를 수정합니다. 아래 첨부파일에도 위의 코드를 올려두었으니 다운로드 받으시여 편리하게 사용하시기 바랍니다.

친효스킨 폰트어썸 위치조정 CSS.txt

0.00MB

이것을 친효스킨 CSS에 그대로 붙여넣기 하시면 됩니다.