찾다
웹 프론트엔드H5 튜토리얼\9 및 \0은 IE11\IE9\IE8을 해킹할 수 있습니다. 잘못된 이유에 대한 자세한 설명

每次设计一张网页或一个表单,都被各种浏览器的兼容问题伤透脑筋,尤其是IE家族。在做兼容性设计时,我们往往会使用各种浏览器能识别的独特语法进行hack,从而达到各种浏览器下显示正常的目的。其中,我们用得最多莫属于\9和\0了。\9和\0是hack IE8、IE9、IE11的独特标识。但是问题来了,\9和\0到底怎样hack IE8、IE9、IE11这三个浏览器?这个问题一直困扰我很久,不过,今天我终于搞明白了,也独创了一个能hack IE8、IE9、IE11这三个浏览器的代码写法模式,本文将与各位分享。

\9和\0为什么可能hack IE11\IE9\IE8无效?

可能很多人都略明白,\0是用来hack IE8、IE9、IE11的,而\9是用来hack IE9的。但有时你真正运用起来,它并不凑效。看下面的html代码:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com</title>
    <style type="text/css">
    .content{
          width:400px;height:50px;color:#ccc;
          background-color:#FF0000;  /* 红色 */
          background-color:#0000FF\0;  /* 蓝色 */
          background-color:#FFFF00\9;  /* 黄色 */
    }
    </style>
</head>
<body>
     <div class="content">IE8 IE9 IE11均显示黄色</div>
</body>
</html>

上例中,\9和\0就达不到hack 各IE浏览器版本的目的。不过我们把 /* 蓝色 */ 和 /* 黄色 */ 这两行调换,又会怎样显示呢?请看html代码:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com</title>
    <style type="text/css">
    .content{
          width:400px;height:50px;color:#ccc;
          background-color:#FF0000;  /* 红色 */ 
          background-color:#FFFF00\9;  /* 黄色 */
          background-color:#0000FF\0;  /* 蓝色 */
    }
    </style>
</head>
<body>
     <div class="content">IE11显示黄色,IE8 IE9 均显示蓝色</div>
</body>
</html>

结果是,IE11显示黄色,而IE8和IE9均显示蓝色。

上述两个例子说明,IE8、IE9都能读懂\9和\0标识,此两标识哪个写在后面就以哪个为准,而IE11仅能读懂\9标识。

至此,我们能否根据上述结论来写代码来hack IE8、IE9和IE11三个浏览器?显然是不可以的,至少你不可以hackIE8和IE9,仅能hackIE11。

如何hack IE8和IE9

那么,我们如何去hack IE8和IE9呢?这个就是问题的关键。

在此文 css区分ie8/ie9/ie10/ie11 chrome firefox的代码 中提到,IE9以上浏览器可以读懂此代码:

/* IE9+ */
@media all and (min-width:0) {
    .divContent{
        background-color:#eee;
    }
}

我们用此代码结合前面的代码,是不是就可以hack IE8和IE11了?完整html代码如下:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com</title>
    <style type="text/css">
    .content{
          width:400px;height:50px;color:#ccc;
          background-color:#FF0000;  /* 红色 */ 
          background-color:#FFFF00\9;  /* 黄色 */
          background-color:#0000FF\0;  /* 蓝色 */
    }
    /* IE9+ */
    @media all and (min-width:0) {
        .content{
            background-color:#000;   /* 黑色 */
        }
    }
    </style>
</head>
<body>
     <div class="content">IE11显示黄色,IE8 显示蓝色,IE9显示黑色。</div>
</body>
</html>

至此,IE8、IE9、IE11的兼容性问题就解决了。

不过,还没玩,因为 @media all and (min-width:0) 在 Chrome、Firefox、360等浏览器同样有效。所以,上面代码需要稍微修改下,在 @media all and (min-width:0) {} 里面的css语句同样加上\0标识,表示这是属于IE9的样式。修改后的完整代码如下:

<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com</title>
    <style type="text/css">
    .content{
          width:400px;height:50px;color:#ccc;
          background-color:#FF0000;  /* 红色 */ 
          background-color:#FFFF00\9;  /* 黄色 */
          background-color:#0000FF\0;  /* 蓝色 */
    }
    /* IE9+ */
    @media all and (min-width:0) {
        .content{
            background-color:#000\0;   /* 黑色 */
        }
    }
    </style>
</head>
<body>
     <div class="content">IE11显示黄色,IE8 显示蓝色,IE9显示黑色。</div>
</body>
</html>

至此,IE8、IE9、IE11的兼容性问题就完美解决了。

meta声明属性 IE=Edeg 后,IE8\IE9\IE11的兼容代码

但是,如果网页HTML代码里声明了Meta元件 IE=Edge,那么上面的代码是不对的。

先看第一个html代码:

<!DOCTYPE html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com</title>
    <style type="text/css">
    .content{
          width:400px;height:50px;color:#ccc;
          background-color:#FF0000;  /* 红色 */
          background-color:#0000FF\0;  /* 蓝色 */
          background-color:#FFFF00\9;  /* 黄色 */
    }
    </style>
</head>
<body>
     <div class="content">IE11显示蓝色,IE8 IE9均显示黄色</div>
</body>
</html>

结果是,IE11显示蓝色,IE8 IE9均显示黄色,并非三个浏览器都显示黄色了。

这就说明,加了meta IE=Edge 这句,IE11不再能读\9这个标识。

我们再看如下代码:

<!DOCTYPE html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com</title>
    <style type="text/css">
    .content{
          width:400px;height:50px;color:#ccc;
          background-color:#FF0000;  /* 红色 */
          background-color:#FFFF00\9;  /* 黄色 */
          background-color:#0000FF\0;  /* 蓝色 */
    }
    </style>
</head>
<body>
     <div class="content">IE8 IE9 IE11 均显示蓝色</div>
</body>
</html>

execcodegetcode

结果是,IE8 IE9 IE11 均显示蓝色,这说明了,IE8 IE9 IE11 均能读懂\0这个标识。

结合上面两个例子,可以得出结论,加了meta IE=Edge 属性后,IE8 IE9能同时读懂\9和\0这两个标识,而IE11仅能读懂\0这个标识。

所以,我们可以据此来hack出IE11。如下html代码加以说明:

<!DOCTYPE html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com</title>
    <style type="text/css">
    .content{
          width:400px;height:50px;color:#ccc;
          background-color:#FF0000;  /* 红色 */
          background-color:#0000FF\0;  /* 蓝色 这个是给IE11的 */
          background-color:#FFFF00\9;  /* 黄色 这个是给IE8和IE9的 */
    }
    </style>
</head>
<body>
     <div class="content">IE11显示蓝色,IE8 IE9均显示黄色</div>
</body>
</html>

这样,我们再用上面的代码hack出IE8和IE9就可以了。

如何hack IE8和IE9 ?还是前面那个hack IE8 IE9的关键代码:

@media all and (min-width:0) {}

完整html代码这样写:

<!DOCTYPE html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com</title>
    <style type="text/css">
    .content{
          width:400px;height:50px;color:#ccc;
          background-color:#FF0000;  /* 红色 */
          background-color:#0000FF\0;  /* 蓝色 这个是给IE11的 */
          background-color:#FFFF00\9;  /* 黄色 这个是给IE8和IE9的 */
    }
    /* IE9+ */
    @media all and (min-width:0) {
        .content{
            background-color:#000\9;   /* 黑色 这个是给IE9的 */
        }
    }
    </style>
</head>
<body>
     <div class="content">IE11显示蓝色,IE8显示黄色,IE9显示黑色</div>
</body>
</html>

위 내용은 \9 및 \0은 IE11\IE9\IE8을 해킹할 수 있습니다. 잘못된 이유에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
내 HTML5 웹 사이트에 오디오를 추가하는 방법은 무엇입니까?내 HTML5 웹 사이트에 오디오를 추가하는 방법은 무엇입니까?Mar 10, 2025 pm 03:01 PM

이 기사는 & lt; audio & gt를 사용하여 HTML5에 오디오를 포함시키는 방법을 설명합니다. 형식 선택에 대한 모범 사례 (MP3, OGG Vorbis), 파일 최적화 및 재생에 대한 JavaScript 컨트롤을 포함한 요소. 다중 오디오를 사용하는 것을 강조합니다

HTML5 페이지 가시성 API를 사용하여 페이지가 표시되는시기를 감지하려면 어떻게합니까?HTML5 페이지 가시성 API를 사용하여 페이지가 표시되는시기를 감지하려면 어떻게합니까?Mar 13, 2025 pm 07:51 PM

이 기사에서는 HTML5 페이지 가시성 API를 사용하여 페이지 가시성을 감지하고 사용자 경험을 향상 시키며 리소스 사용량을 최적화하는 것에 대해 설명합니다. 주요 측면에는 미디어 일시 정지, CPU 부하 감소 및 가시성 변경에 기반한 분석 관리가 포함됩니다.

HTML5 및 JavaScript로 대화 형 게임을 만드는 방법은 무엇입니까?HTML5 및 JavaScript로 대화 형 게임을 만드는 방법은 무엇입니까?Mar 10, 2025 pm 06:34 PM

이 기사는 JavaScript를 사용하여 대화식 HTML5 게임을 만드는 자세한 내용입니다. 게임 디자인, HTML 구조, CSS 스타일, JavaScript 로직 (이벤트 처리 및 애니메이션 포함) 및 오디오 통합을 다룹니다. 필수 JavaScript 라이브러리 (Phaser, PI

사용자 입력에 HTML5 양식을 사용하는 방법은 무엇입니까?사용자 입력에 HTML5 양식을 사용하는 방법은 무엇입니까?Mar 10, 2025 pm 02:59 PM

이 기사에서는 HTML5 양식을 작성하고 검증하는 방법을 설명합니다. 그것은 & lt; form & gt; 요소, 입력 유형 (텍스트, 이메일, 번호 등) 및 속성 (필수, 패턴, 최소, 최대). HTML5의 장점은 오래된 방법에 비해 형성됩니다

뷰포트 메타 태그를 사용하여 모바일 장치에서 페이지 스케일링을 제어하려면 어떻게합니까?뷰포트 메타 태그를 사용하여 모바일 장치에서 페이지 스케일링을 제어하려면 어떻게합니까?Mar 13, 2025 pm 08:00 PM

이 기사에서는 Viewport Meta 태그를 사용하여 모바일 장치의 페이지 스케일링을 제어하여 폭과 최적의 응답 성 및 성능을위한 초기 스케일과 같은 설정에 중점을 둡니다. character count : 159

Geolocation API로 사용자 위치 개인 정보 및 권한을 어떻게 처리합니까?Geolocation API로 사용자 위치 개인 정보 및 권한을 어떻게 처리합니까?Mar 18, 2025 pm 02:16 PM

이 기사는 지리적 위치 API를 사용하여 사용자 위치 개인 정보 및 권한 관리, 권한 요청, 데이터 보안 보장 및 개인 정보 보호법 준수에 대한 모범 사례를 강조하는 것에 대해 설명합니다.

HTML5 알림 API를 사용하여 데스크탑 알림을 표시하는 방법은 무엇입니까?HTML5 알림 API를 사용하여 데스크탑 알림을 표시하는 방법은 무엇입니까?Mar 13, 2025 pm 07:57 PM

이 기사는 HTML5 알림 API를 사용하여 허가 요구 사항, 사용자 정의 및 브라우저 지원에 중점을 둔 데스크탑 알림을 표시하는 방법을 설명합니다.

대화식 사용자 인터페이스에 HTML5 드래그 앤 드롭 API를 어떻게 사용합니까?대화식 사용자 인터페이스에 HTML5 드래그 앤 드롭 API를 어떻게 사용합니까?Mar 18, 2025 pm 02:17 PM

이 기사는 HTML5 드래그 앤 드롭 API를 사용하여 대화식 사용자 인터페이스를 생성하고 요소를 드래그 가능하게 만들고 주요 이벤트를 처리하며 사용자 정의 피드백으로 사용자 경험을 향상시키는 방법을 자세히 설명합니다. 또한 일반적인 함정에 대해 설명합니다

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

mPDF

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기