브라우저 별 CSS Hack 모음집


IE6, IE7 에서만 먹는 CSS Hack 과 같이
Firefox에서만 먹는 CSS Hack 을 찾다가 발견한 브라우저 별 Hack 모음집 입니다.
(CSS 3 Validate 통과한다고 합니다. 정말?)

http://tanreisoftware.com/blog/?p=39

/* Target Gecko */
   html:not([lang*=""]) #selector {
      attribute: value;
   }

/* Filter out Gecko */
   html[lang*=""] #selector {
      attribute: value;
   }


그래도 이런 꼼수는 최대한 자제해야죠. 읏샤.

Posted by mkyoon



투명처리된 PNG 파일은 IE 6 에서 회색 바탕으로 나옵니다.
이를 해결하기 위해 PNG를 배경그림으로 넣고
AlphaImageLoader 필터를 씌우는데요.

특수한 경우
필터 먹은 DIV 안에 있는 링크를 아무리 눌러도
클릭이 되지 않는 현상이 생깁니다. (언제나 이상한 IE.)

필터먹인 DIV에
position: relative, absolute 설정을 주면
안에 있는 링크는 무용지물이 되고 맙니다.

해결방법

1. 필터 먹인 DIV에는 position 설정이 없거나 position: static;

2. 그 안에 들어있는 링크(a)에 relative 혹은 absolute 를 주세요.

끗.

Posted by mkyoon



부모 element 의 높이를 그대로 받아
자식 element 에 높이를 지정하려면

부모와 자식에 같은 높이 px 값을 주면 된다.

그러나 부모의 높이가 항상 일정하지 않을 경우가 있다.
특정 상황에서 높이가 변한다면 자식에는 height: auto;를 주면 된다.
자식 element 에는 height: 100%를 주면 된다.

하지만
우리의 귀염둥이 IE 6 은 언제나 혼자 논다.
변하고 있는 부모 element의 height 와 상관 없이
자식 element는 부모 height를 늘여 있는 그대로를 전부 표시한다.

자바스크립트를 이용하여
getElementById 로 부모의 height를 설정하여 지정해야 하는건가
IE 6 하나 때문에 모든 브라우저에서 자바스크립트 렌더링을 해줘야 하는건가-_-

훗.
IE 6 핵 중에 expression 을 이용하면 단박에 해결된다.

#자식selector {
     height: expression(document.getElementById('부모id').style.height );
}


이럼 IE 6 만을 위한 스크립트 완성이다.
야호!

Posted by mkyoon


Min-Height CSS Hack


오늘도 어김없이 나의 발목을 잡는 IE 6.
min-height 속성을 줄 방법을 찾다가
구글에서 CSS 핵을 발견했다.+_+오예~

selector {
    min-height:500px;
    height:auto !important;
    height:500px;
}


min-height 가 먹는 녀석은 잡수라 냅두고
height: auto; 는 IE에서 important 핵을 써서 IE6 이외 브라우저에서 내용에 따라 늘어나게 되며
height: 500px 은 IE6 에서 500이하로 떨어지지 않게 됨.

만쉐이.

출처 : http://www.dustindiaz.com/min-height-fast-hack/

Posted by mkyoon


CSS IE Hack

  • IE 6 이하
    * html { ... }
  • IE 7 이하 (두가지 동시에 사용)
    *:first-child+html { ... } * html { ... }
  • IE 7 에서만
    *:first-child+html { ... }
  • IE 6 제외한 최신 브라우저 (IE7, Mozila, Opera, Safari? )
    html>body { ... }
  • IE 7 제외한 최신 브라우저
    html>/**/>body { ... }
  • Comment Hack
    〈!--[if IE 6]>
    According to the conditional comment this is Internet Explorer 6
    〈![endif]-->


출처 : ui naverdesign

Posted by mkyoon