2011-09-19 4 views
5

웹 프로젝트를 위해 PHP를 사용하지만, CSS만으로이 색상을 보완해야합니다.CSS를 혼자 사용하여 IE 및 Firefox에 이상하거나 색칠하는 방법은 무엇입니까?

따라서 Firefox 및 Internet Explorer에서 작동하는 코드가 필요합니다.

이 코드가 기록되어 있지만, 인터넷 익스플로러에서 작동하지 않습니다

.tbl_css col:nth-child(odd){  
} 

.tbl_css col:nth-child(even){  
} 
+3

을 당신은 IE 5, IE 9 의미? 또한, 어떻게 할 수 있는지를 모르는 사람을 위해서, 당신은 그걸 * 할 수 있다고 확신합니다. – Jon

답변

13

낮은 버전의 IE는 의사 선택을 지원하지 않습니다.

당신은 작동하도록 jQuery를 사용할 수 있습니다

$(document).ready(function(){ 
    $('table tr:even').addClass('even'); 
    $('table tr:odd').addClass('odd'); 
}); 

을 단순히 CSS에서 :

.even{ /* your styles */ } 
.odd { /* your styles */ } 
+0

좋고 간단하다, 고마워! – Aries51

6

당신이 테스트 IE의 버전은 무엇?

nth-child 셀렉터는 IE9의 IE에만 ​​추가되었습니다. 이전 버전 (IE8 및 이전 버전)은 지원하지 않습니다.

이전 버전의 IE에서이 효과를 얻으려면 다른 방법을 사용해야합니다. 가장 일반적인 방법은 단순히 요소를 <tr> 요소로 교대로 HTML을 출력하는 것입니다. 이 효과를 얻을 수있는 JQuery 플러그인도 있습니다.

희망이 있습니다.

+2

+1, 나는 또한이 아주 좋은 링크를 추가 할 것이다 : http://www.findmebyip.com/litmus/ – Jon

7

의사 선택기 :nth-child은 모든 주요 브라우저 (IE 9 이상, FF 3.5 이상)의 최신 버전에서 지원됩니다. 당신이 (예를 들어 IE 8을) 이전 버전의 브라우저를 지원해야하는 경우, 당신은 수동으로 당신의 열을 class="odd", class="even"을 할당하거나 JQuery와 사용할 수 있습니다

$(".tbl_css col:nth-child(2n+1)").addClass("odd"); 
$(".tbl_css col:nth-child(2n)").addClass("even"); 

.odd.tbl_css col:nth-child(odd) 이름을 바꿉니다.
이름 바꾸기 .tbl_css col:nth-child(even) ~ .even.

관련 문제