브라우저 마다 다르게 css 적용하기

사이트를 다 완성하고나서 꼭 해야할일이, 
ie 7 이나 8에서 어떻게 돌아가는지 확인해야한다.
가끔가다 뭔가 찌그러저 있거나 padding, margin이 다른경우가 있는데,
이런거는 html이 아니고 css소스를 수정해야하는데,

페이지 오른쪽에 소스보기 하면 아래같은 내용이 각주처리로 되어있따.

<!--[if lt IE 9]>  ie 9보다 낮은 브라우저 일때

<link rel="stylesheet" type="text/css" href="/layouts/SKUDEP/css/ie.css" />  

<![endif]-->

<!--[if IE 9]>  ie9 일때

<link rel="stylesheet" type="text/css" href="/layouts/SKUDEP/css/ie9.css" />  

<![endif]-->

<!--[if IE 8]>  ie8 일때

<link rel="stylesheet" type="text/css" href="/layouts/SKUDEP/css/ie8.css" />  

<![endif]-->

<!--[if IE 7]>  ie7 일때 

<link rel="stylesheet" type="text/css" href="/layouts/SKUDEP/css/ie7.css" />  

<![endif]-->

<!--[if IE 6]>  ie9 일때 (과장님이 대충해놓으심 : 버리는 카드) 

<link rel="stylesheet" type="text/css" href="/layouts/SKUDEP/css/ie6.css" />  

<![endif]-->

box shadow 왜 이렇게 세줄이나 써야대??
: 요렇게 쓰는 이유는 지금 브라우저별 랜더링 엔진을 지정해서 shadow를 주는건데, 
순서도 중요하다. 이렇게 세줄이나 쓰는 이유는 듣긴들었는데 머리속에서 정리가 되지 않아 아직 은하수 속에.. 

1번쨰 -moz-box-shadow:2px 2px 2px rgba(0, 0, 0, 0.30);

2번째 -webkit-box-shadow:2px 2px 2px rgba(0, 0, 0, 0.30);

3번째 box-shadow:2px 2px 2px rgba(0, 0, 0, 0.30);