HighCa.com

문제점 IE6에서 a태그 옆에 img 태그가 위치할 경우 텍스트 언더라인(underline)이 텍스트에 너무 붙어 보기가 이상한 문제. 단, 파이어폭스나 IE8등 다른 브라우저에서는 별다른 문제 없음. IE6 IE8 FireFox 3.6 Chrome 3.0 모든 경우에 그런 것은 아니며, 아래 예제 소스와 같이 특정한 경우에만 발생된다. 위 표에서 보면 알 수 있듯, IE6을 제외한 다른 브라우저에서는 텍스트와 밑줄 사이의 여백이 적당히 있어 보기가 나쁘지 않지만 IE6에서는 너무 붙어있어 보기가 좋지 않다. 예제 소스 하하하 발생 원인 body에 선언된 한글 폰트 문제 (굴림, Gulim, 돋움, Dotum) img에 선언된 vertical-align:middle 속성 해결 방법 선언한 한글폰트를 삭제..

인터넷 익스플로러6에서 absolute 등으로 부유된 div가 select에 가려지는 현상에 곤욕을 치루는 경우가 많다. IE6은 div보다 select를 우선으로 처리하기 때문인지라 자바스크립트를 사용해 div가 부유될 경우 select를 강제로 숨겨주는 등의 기법이 알려져 있다. ▲ 일반 브라우저에서 정상 출력되는 모습(좌) / IE6에서 select에 가려진 현상(우) 하지만 css만으로도 div가 select에 가려지지 않게 만들 수 있다. 해답은 비어있는 iframe 을 부유된 div와 같은 위치로 넣으면 된다는 것. 위 예제의 코드는 아래와 같다. 내용 어쩌구 어쩌구 어쩌구 어쩌구 해결책 여기에 아래와 같이 굵은 글씨로 된 코드처럼 비어있는 iframe을 부유된(absolute) div와 같은..

IE6이나 7 에서는 position:relative 및 position:absolute 에서 z-index 가 먹지 않는 버그가 있다. 까만놈1 창구1 까만놈2 창구2 위 예제와 같이 absolute 된 레이어가 position:relative 속성을 가진 영역과 겹칠 있을 경우 " 창구1(absolute 된 레이어)" 이 보이지 않는 문제가 발생한다. 파이어폭스나 크롬 등 웹표준 브라우저에서는 창구1에 z-index:1000 등을 주면 인식을 하지만 IE6에서는 그렇지 않다. ▲ 파이어폭스 및 크롬 등에서 창구1이 정상적으로 출력되는 모습. ▲ IE6과 7에서는 까만놈1에 가려서 창구1이 안 보인다. 해결책 까만놈1 창구1 까만놈2 창구2 absolute 속성이 있는 div를 감싸는 position:..

얼마전 정식 출시한 구글의 웹브라우저 크롬 2.0.178.28 버전을 설치하였다. 그런데 개발중인 웹사이트를 크롬 2.0으로 테스트를 해보니 페이지 레이아웃이 상당 부분 깨져 출력되는 것을 확인하였다. 크롬의 개발자 도구로 확인해 보니 아래와 같은 문제점이 있었다. 나는 분명히 아래와 같이 CSS를 작성했는데 말이다. @import "common.css"; @charset "UTF-8"; * {margin : 0; padding : 0; list-style:none; border:none;} body{font:12px/1.9 gulim; word-break:break-all; line-height:160%;} hr {display:none;} - 후략 - 즉, common.css 스타일도 적용하면서, 모..