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

H5 및 HTML5는 동일한 것을, 즉 html5를 나타냅니다. HTML5는 HTML의 다섯 번째 버전으로 시맨틱 태그, 멀티미디어 지원, 캔버스 및 그래픽, 오프라인 스토리지 및 로컬 스토리지와 같은 새로운 기능을 제공하여 웹 페이지의 표현성 및 상호 작용성을 향상시킵니다.

h5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelements 및 dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enovannangeserexperienceacrossdevices.3) SemanticLementsImproveContentsTructUreAndSeo.4) H5'Srespo

H5 개발에서 마스터 해야하는 도구 및 프레임 워크에는 vue.js, React 및 Webpack이 포함됩니다. 1.vue.js는 사용자 인터페이스를 구축하고 구성 요소 개발을 지원하는 데 적합합니다. 2. 복잡한 응용 프로그램에 적합한 가상 DOM을 통해 페이지 렌더링을 최적화합니다. 3. Webpack은 모듈 포장에 사용되며 리소스로드를 최적화합니다.

html5hassignificallytransformedwebdevelopmentbyintranticalticlementements, 향상 Multimediasupport 및 Improvingperformance.1) itmadewebsitessmoreaccessibleadseo 친환경적 인 요소, 및 .2) Html5intagnatee

H5는 시맨틱 요소 및 ARIA 속성을 통해 웹 페이지 접근성 및 SEO 효과를 향상시킵니다. 1. 컨텐츠 구조를 구성하고 SEO를 개선하기 위해 사용합니다. 2. Aria-Label과 같은 ARIA 속성은 접근성을 향상시키고 보조 기술 사용자는 웹 페이지를 원활하게 사용할 수 있습니다.

"H5"와 "HTML5"는 대부분의 경우 동일하지만 특정 시나리오에서는 다른 의미를 가질 수 있습니다. "HTML5"는 새로운 태그와 API를 포함하는 W3C 정의 표준입니다. "H5"는 일반적으로 HTML5의 약어이지만 모바일 개발에서는 HTML5를 기반으로 한 프레임 워크를 참조 할 수 있습니다. 이러한 차이를 이해하면 프로젝트 에서이 용어를 정확하게 사용하는 데 도움이됩니다.

H5 또는 HTML5는 HTML의 다섯 번째 버전입니다. 개발자에게 더 강력한 도구 세트를 제공하여 복잡한 웹 애플리케이션을보다 쉽게 만들 수 있습니다. H5의 핵심 기능에는 다음이 포함됩니다. 1) 웹 페이지에 그래픽 및 애니메이션을 그리는 요소; 2) 웹 페이지 구조를 SEO 최적화에 명확하고 도움이되는 시맨틱 태그 등; 3) GeolocationApi 지원 위치 기반 서비스와 같은 새로운 API; 4) 호환성 테스트 및 폴리 필 라이브러리를 통해 크로스 브라우저 호환성을 보장해야합니다.

H5 링크를 만드는 방법? 링크 대상 결정 : H5 페이지 또는 응용 프로그램의 URL을 가져옵니다. HTML 앵커 작성 : & lt; a & gt; 태그 앵커를 만들고 링크 대상 URL을 지정합니다. 링크 속성 설정 (선택 사항) : 필요에 따라 대상, 제목 및 on 클릭 속성을 설정하십시오. 웹 페이지에 추가 : 링크가 나타나려는 웹 페이지에 HTML 앵커 코드를 추가하십시오.


핫 AI 도구

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

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

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

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

Dreamweaver Mac版
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

SublimeText3 Linux 새 버전
SublimeText3 Linux 최신 버전

WebStorm Mac 버전
유용한 JavaScript 개발 도구

SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
