크로스 브라우징을 위한 css 속성 사용 팁

1. ie7 ~ 8 에선 css의 가상선택자인 last-child가 먹히지 않는다.

( 반대로 first-child는 정상 작동 된다.)

 

last-child를 모든 브라우저에 사용 하려면 각 객체만큼의 인접 선택자를 사용 하면된다.

<ul>

    <li></li>

    <li></li>

    <li></li>​​

</ul>

가 있다면 마지막 선택자는

ul li:last-child{} -> ie9 이상

ul li+li+li{} -> 모든 브라우저

 

2. inline-block 처리

ie7 에서 inline-block라는 속성이 먹히긴 하지만 기존의 태그의 속성이 블럭태그 였다면 

먹히지 않는다 해결방법은 속성에 { zoom:1; *display:block } 처럼 핵을 사용 하는 방법이 있는데 추천하지는 않는다.

가장 무난한 해결 방법은 div나 center, dd, dl, li 같은 블럭요소의 태그에 사용 하는것보다

span이나 a, b, i 등 인라인태그에 inline-block를 사용하면 오류 없이 사용 할 수 있다.

 

3. ie7,8,9 는 초기 간격이나 여백값이 다르기 때문에 초기화를 한번 해주어야 한다.

 

ex) body{margin:0, padding:0}  혹은 reset.css 를 검색해보기 바란다.

 

4. 테이블의 테두리 색상은 ie에서 각기 다르기 때문에 각 td에 주는 편이 똑같이 볼 수 있다.

border='1' 이라는 속성 자체보다 css로 td{border:1px solid gray} 처럼 주는 것이 좋다.

 

두줄을 합치려면 border-collapse:collapse; 속성을 사용하면 되고

td:hover{} 오버시의 테두리 색을 변경하려면 기존 solid보다 우선위권자인 double를 사용하면된다.

td:hover{border:1px solid double}