ie 호환방법
@욕심쟁이
·2019. 12. 11. 12:02
반응형
ie10까지는 css3가 잘 적용됩니다.
하지만 9부터는 망가지기 시작하는데요.
첫번째 방법은 아래와 같이 @midia를 따로 사용하여 각각의 css를 적용합니다.
/*ie9/ie10 */
@media screen and (min-width:0\0) {
span{width:15px;}
}
/* ie8/ie9/ie10 */
@media screen\0 {
span{width:15px;}
}/ie7/ie6 */
@media \0screen\,screen\9 {
span{width:15px;}
}
/* ie8 */
@media \0screen {
span{width:15px;}
}
/* ie6/7이하 */
@media screen\9{
span{width:15px;}
}
두번째 방법으로는 밑에와 같이 <!--[if IE]> <style type="text/css"> </style> <![endif]--> 이용하여 따로 적용하게 될경우 ie만의 css를 적용 시킬수 있습니다.
그리고 background 같은경우 한꺼번에 적어줬을때 호환이 되지않기 때문에 각각 적어 주어야합니다.
<!--[if IE]>
<style type="text/css">
.board .tit{background: url('../images/tit_dot.png'); background-repeat: no-repeat; background-position: 3% 42%;}
</style>
<![endif]-->
//각각의 환경에 맞는 예외처리방법
<!--[if IE 7 ]> <body class="ie7 le_ie9 le_ie8"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8 le_ie9 le_ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9 le_ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body class="board"> <!--<![endif]-->
<style type="text/css">
.board .tit{background: url('../images/tit_dot.png') no-repeat 3% 42%;}
</style>
마지막으로 ie7에서는 after,before 가상선택자가 적용되지않습니다.
이를 방지하여 ie7까지 호환해야하는경우 after,before를 사용하지않고 빈태그를 사용하여 적용시키는 것이 좋습니다.
반응형
'IT > CSS' 카테고리의 다른 글
| [css] radio버튼 디자인 바꾸기 (0) | 2019.12.11 |
|---|---|
| float 속성 (0) | 2019.12.11 |
| css 원하는 부분 선택자 (0) | 2019.12.11 |
| 공통css모음 (0) | 2019.12.11 |
| CSS로 문자열 자르기 - 한 줄 /여러 줄 (0) | 2019.12.11 |
