CSS 해킹 백과사전 - IE6-IE10, FireFox, Chrome, Opera_Experience 교환을 구별하는 방법을 배웁니다.

현재 사용 가능한 브라우저는 IE6-IE10, Firefox, Chrome, Opera, Safari입니다. . . 수백 개의 학파가 경쟁하고 있다고 말할 수 있을 만큼 너무 많고 사용자를 위한 옵션도 많지만 이는 웹 프런트 엔드 개발자에게는 고통스러운 일입니다.
오늘은 일반적으로 사용되는 IE 핵과 Firefox, Chrome 및 Opera 브라우저용 핵을 포함하여 일반적으로 사용되는 CSS 핵을 정리하고 이러한 CSS 핵을 결합하여 작은 브라우저 테스터를 작성했습니다. 사진과 같이:

코드를 살펴보겠습니다:

html 부분:

코드 복사 코드는 다음과 같습니다.

 

 

  

IE6의 배경색: #ccc

                                                                 ~             #666;">#666

                    < ;p>IE8의 배경색: #06f

                                               ~                                ​ 

 

IE10의 배경색: #0ff

 

웹킷, Safari, Chrome 아래의 배경색: #ff0                                                                                                                       p> Opera의 배경색: #0f0

< /div>

CSS 부분, 이 부분에는 코드의 Hack 부분만 게시되고 레이아웃은 게시되지 않습니다.

코드 복사 코드는 다음과 같습니다.

.content .test {
width : 200px;
높이: 200px;
배경: #f60; /*all*/
배경: #06f9; /*IE*/
*배경: #666; */
_Background: #ccc; /*IE6*/
}

/* 웹킷 및 오페라 */
@media all 및 (min-width:0){
.content . 테스트 {
배경: #0f0;
}
}

/* webkit */
@media 화면 및 (-webkit-min-device-pixel-ratio :0) {
.content .test {
배경: #ff0;
}
}

/*FireFox*/
@-moz-document url-prefix () {
.content .test {
배경: #f0f;
}
}

/*IE9+*/
@media all 및 (최소 너비: 0) {
.content .test{
배경: #f009;
}
}

/*IE10+*/
@media 화면 및 (-ms-high -대비: 활성), (-ms-고대비: 없음) {
.content .test {
배경: #0ff;
}
}

css-hack-ms-moz-webkit-o-Jb51.net.rar

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.