브라우저 별로 CSS 다르게 작성하기

브라우저 마다 적용되는 스타일이 다른 것을 해결하기 위해 브라우저별 접두어를 사용하여 CSS를 작성한다.

브라우저별 접두어

• -webkit- : 구글, 사파리 브라우저에 적용.
• -moz- : 파이어폭스 브라우저에 적용.
• -ms- : 익스플로러에 적용. (생략 가능)
• -o- : 오페라 브라우저에 적용

예시

div {
        border-image: url(border.png) 30 30 round;
        -moz-border-image: url(border.png) 30 30 round; /* Firefox */
        -webkit-border-image: url(border.png) 30 30 round; /* Safari and Chrome */
        -o-border-image: url(border.png) 30 30 round; /* Opera */
      }