每次设计一张网页或一个表单,都被各种浏览器的兼容问题伤透脑筋,尤其是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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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

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

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

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

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

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

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

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


핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

드림위버 CS6
시각적 웹 개발 도구

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

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

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

Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
