IE6\7\8과의 호환성이 html5 태그를 지원하지 않는 문제를 해결하는 몇 가지 방법-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

IE6\7\8과의 호환성이 html5 태그를 지원하지 않는 문제를 해결하는 몇 가지 방법

不言

May 08, 2018 pm 03:28 PM

html5ie지원되지 않음

이 글에서는 IE678과의 호환성이 html5 태그를 지원하지 않는 문제를 해결하기 위한 몇 가지 방법을 주로 소개합니다. 이제 필요한 친구들이 참고할 수 있도록 공유하겠습니다.

html5 시대가 왔습니다. 아직도 HTML5와 CSS3 기술을 마스터해야 할지 고민 중이시라면 한 번 뺨을 때리고 열심히 공부하시기 바랍니다! html5 태그를 지원하지 않는 IE678과의 호환성 문제를 해결하기 위한 몇 가지 방법을 살펴보겠습니다. HTML5가 대중화되는 시대가 도래했습니다. 여전히 브라우저 호환성을 기다리고 있다면 이미 웹과의 연결이 끊어졌다는 의미입니다. 물론 이는 모바일 클라이언트의 급속한 발전 때문입니다. 아직도 HTML5와 CSS3 기술을 마스터해야 할지 고민 중이시라면, 한 번 뺨을 때리고 열심히 공부하시기 바랍니다! 프론트 엔드의 스프링이 도착했고 스프링이 두 개 이상 있기 때문입니다. 당신이 믿지 않는다면 나는 단지 이렇게 말할 수밖에 없습니다: 믿거나 말거나!
표준 html5 태그 구조를 살펴보겠습니다. (여기서는 태그에 대해서만 이야기하고 있으며 다른 내용은 없습니다.)

코드 복사

코드는 다음과 같습니다.

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="gb2312"> 
<title>html5</title> 
</head> 
<body> 
<header> 
<nav></nav> 
</header> 
<article> 
<section> 
<h2></h2> 
<p></p> 
</section> 
</article> 
<footer></footer> 
</body> 
</html>

The html5 태그의 진행 상황은 물론 그 의미가 더 직관적입니다. 물론 이것은 html5의 발전 중 한 방울에 불과합니다. 일부 사람들은 다음과 같이 제안합니다. html5의 발전이 혁명적이라고 말하지 말고 발전적이라고 말하세요! 나는 이 말에 동의하지 않지만, 어떤 면에서는 참으로 혁명적입니다. 여기서 주제를 벗어나고 싶지는 않습니다. 레이블에 대해서만 이야기하겠습니다.

물론 이렇게 훌륭한 의미 태그에 흥미가 있을 때에도 다음과 같이 질문해야 합니다. IE가 이를 지원합니까? 불행히도 대답은 '아니요'입니다. 이미 IE가 두렵다면 끝없는 고문을 계속 견뎌야 할 것입니다. (IE9 및 IE10은 이미 HTML5 및 CSS3.0과 호환됩니다.)
하지만 운이 좋아야 합니다. 당신이 살고 있는 이 시대에는 천재들이 많이 있습니다. 누군가가 이미 이 문제를 해결해 주었습니다! 하지만 완벽하다고 할 수는 없습니다!
호환되는 IE678이 html5 태그를 지원하지 않는 문제를 해결하는 몇 가지 방법을 살펴보겠습니다.
1. javascript: document.createElenment("...")
IE678이 이를 지원하지 않는 이유 중 일부는 다음과 같습니다. 바닥글을 유효한 HTML 태그로 간주하지 않습니다. 그렇다면 라벨로 '만들면' 충분하지 않을까요? 가장 직접적인 방법은 물론 javascript를 사용하여 만드는 것입니다: document.createElenment("...")!

코드를 복사하세요

코드는 다음과 같습니다.

(function(){ 
var element=[&#39;header&#39;,&#39;footer&#39;,&#39;article&#39;,&#39;aside&#39;,&#39;section&#39;,&#39;nav&#39;,&#39;menu&#39;,&#39;hgroup&#39;,&#39;details&#39;,&#39;dialog&#39;,&#39;figure&#39;,&#39;figcaption&#39;], 
len=element.length; 
while(len--){ 
document.createElement(element[i]) 
} 
})();

이것은 단지 IE678에서 태그가 될 수 있도록 몇 가지 일반적인 html5 태그를 만들기만 하면 됩니다.
누군가 이미 완전한 js 파일을 작성했으므로 다음과 같이 가져오기만 하면 됩니다.

<!--[if lt ie 9]> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 也有写作 
<!--[if lte IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
< ![endif]-->html5shiv和html5shim的区别只有"m"和"v"，没有其它区别！当然这不是我说的。原文是:...the only difference is that "one has an m and one has a v - that&#39;s it."

여기서 특별 참고 사항: IE의 고유한 주석 판단입니다.
lte: 작거나 같음을 의미합니다. 약어는 less를 의미합니다. 이상.
lt: Less than의 줄임말로, less than을 의미합니다.
gte: Greater than orequal to의 약어로, 크거나 같다는 뜻입니다.
gt: Greater than의 약어로, ~보다 크다는 뜻입니다.
!: 같지 않음을 의미하며 JavaScript의 같지 않음 판단 문자와 동일합니다.
IE9에서는 html5 태그를 지원하지만 지원이 완벽하지 않으므로 "lte"라고 쓸 수도 있습니다. 선택에 따라 다릅니다!
물론 새 라벨의 표시 속성을 지정하는 것을 잊지 마세요. 대부분의 경우 라벨을 블록으로 지정합니다.

코드 복사

코드는 다음과 같습니다.

header,footer,article,aside,section,nav,menu,hgroup,details,dialog,figure,figcaption{display:block}

2. 라벨 중첩 방법
사실, 우리는 시맨틱한 html5 태그 내에 p 및 기타 사용 가능한 태그를 삽입한 다음 p에 대한 스타일만 작성하는 방식에 동의하지 않습니다. 태그에 시맨틱 ID나 클래스를 부여하는 것이 좋습니다!

코드를 복사하세요

코드는 다음과 같습니다.

<!--[if lt IE 9]> 
<style> 
body > * .section { 
color: #ff0; 
} 
</style> 
<![endif]--> 
<style> 
section .section { color: #f00; 
} 
</style> 
<section><p class="section">内容测试...</p></section>

하지만 이와 유사한 구조를 가지면 쓸모가 없습니다:

코드 복사

코드는 다음과 같습니다.

<nav > 
<ul class="test"> 
<li></li> 
<li></li> 
<li></li> 
</ul> 
</nav>

3.IE 조건부 주석

코드 복사

코드는 다음과 같습니다.

<!--[if lt IE 9]><p class="section"><![endif]--> 
<!--[if IE 9]><section class="section"><![endif]--> 
<!--[if !IE]><!--><section class="section"><!--<![endif]--> 
...... 
<!--[if lt IE 9]></p><![endif]--> 
<!--[if IE 9]></section><![endif]--> 
<!--[if !IE]><!--></section><!--<![endif]-->

再看一遍IE特有的注释判断：
lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同
相信大家都明白，这是怎么回事！这是一个更加蛋疼的办法！大量的html代码使原本想语义化的代码更加混乱不堪。而且要对样式的书写也不利。
4、使用xmlns定义文档的命我空间
xmlns即是XHTML namespace的缩写，也就是所谓的“命名空间”。与DOCTYPE声明一样，xmlns也属于一种声明。与HTML文档中仍然存在DOCTYPE声明不一样的是，在HTML文档是不存在xmlns的，我们平常所见到的xmlns都是出现在XHTML文档中的。
这是xhtml原有的命名空间，到了html5以后被简化了，。
来自Elco Klingen日志的方法一开始引起了广泛的关注。该技术包含了一个XML形式的命名空间，并使用了含有namespace前缀的元素，例如：

复制代码

代码如下:

<!DOCTYPE HTML> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/"> 
<body> 
<html5:section> 
<!-- content --> 
</html5:section> 
</body> 
</html>

:html5这个前缀并不是一个标准的写法，你也可以用其它字符代替：hl5也是可以的。有了前缀之后，IE会识别新的元素，从而可以应用样式。在其他浏览器中一样有效，那么最后，你就成功地在各个浏览器中构建了一样的元素和一样的样式。
这个方法很明显有个缺陷：你必须在HTML文档中使用XML格式的命名空间，同样，你也需要在css中这么做:

复制代码

代码如下:

html5\:section { display: block; }

那么对js的兼容性如何呢？下面是个测试deml

复制代码

代码如下:

<!DOCTYPE HTML> 
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/html5/"> 
<head> 
<title>;html5</title> 
<meta charset="gb2312"> 
<style> 
html5\:section { display: block; width:100px; height:50px; background:#f00; border: 1px solid blue; color: #ff0; } 
</style> 
<script> 
window.onload = function(){ 
alert(document.getElementById("test").innerHTML + "---id") 
alert(document.getElementsByTagName("section")[0].innerHTML + "---TagName") 
alert(document.getElementsByTagName("SECTION")[0].innerHTML + "---大写") 
} 
</script> 
</head> 
<body> 
<html5:section id="test">内容</html5:section> 
</body> 
</html>

测试结果，IE6\7\8均测试通过，但fixfox和chrome里只有id能获取到，所以这种方法同样不是一个可取的方法！

위 내용은 IE6\7\8과의 호환성이 html5 태그를 지원하지 않는 문제를 해결하는 몇 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

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

관련 기사

HTML 속성이 웹 개발에 중요한 이유는 무엇입니까?May 12, 2025 am 12:01 AM

htmlattributesarecrucialinwebdevelopmentforcontrollingbehavior, 외관 및 기능. 접근성, 접근성, andseo.forexample, thesrcattributeintagspactsseo, whike whike whike whike whike whike thercattributeintagspactsseo

ALT 속성의 목적은 무엇입니까? 왜 중요한가요?May 11, 2025 am 12:01 AM

ALT 속성은 HTML에서 태그의 중요한 부분이며 이미지에 대한 대체 텍스트를 제공하는 데 사용됩니다. 1. 이미지를로드 할 수 없으면 ALT 속성의 텍스트가 표시되어 사용자 경험을 향상시킵니다. 2. 스크린 리더는 ALT 속성을 사용하여 시각 장애가있는 사용자가 그림의 내용을 이해하도록 도와줍니다. 3. 검색 엔진 인덱스 텍스트 텍스트는 웹 페이지의 SEO 순위를 향상시키기 위해 ALT 속성의 텍스트를 색인 텍스트입니다.

HTML, CSS 및 JavaScript : 예제 및 실제 응용 프로그램May 09, 2025 am 12:01 AM

웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 구축하는 데 사용됩니다. 2. CSS는 웹 페이지의 모양을 아름답게하는 데 사용됩니다. 3. JavaScript는 동적 상호 작용을 달성하는 데 사용됩니다. 태그, 스타일 및 스크립트를 통해이 세 가지는 함께 현대 웹 페이지의 핵심 기능을 구축합니다.

태그에서 Lang 속성을 어떻게 설정합니까? 이것이 중요한 이유는 무엇입니까?May 08, 2025 am 12:03 AM

태그의 Lang 속성을 설정하는 것은 웹 접근성 및 SEO를 최적화하는 핵심 단계입니다. 1) 태그에 LANG 속성을 설정하십시오. 2) 다국어 컨텐츠에서는 다른 언어 부품에 대한 LANG 속성을 설정하십시오. 3) "en", "fr", "zh"와 같은 ISO639-1 표준을 준수하는 언어 코드를 사용하여 LANG 속성을 올바르게 설정하면 웹 페이지 및 검색 엔진 순위의 접근성을 향상시킬 수 있습니다.

HTML 속성의 목적은 무엇입니까?May 07, 2025 am 12:01 AM

htmlattributesearsentialforenhancingwebelements'functionalityandAmpearance.theyaddinformationTodeFineBehavior, 외관 및 간호, WebsITESITERACTIVE, RAPITIVE 및 VVESILLY -CAMENTION.ATTRIBUTESLIKESRC, HREF, 클래스, 유형 및 디스티브 트랜스포트

HTML에서 목록을 어떻게 만드나요?May 06, 2025 am 12:01 AM

ToCreateAlistInhtml, useUnorderEdListandForOrdLists : 1) forUnderedList, wrapitemSinanduseForeachitem, renderingasabulletedList.2) forOrderEdlists, useandfornumberedLists, useandfornumberedlists, useandfornumberedlists, useandfornumberedlists, withTheyPeatTributeFferentNumberingStyles.

html in Action : 웹 사이트 구조의 예May 05, 2025 am 12:03 AM

HTML은 명확한 구조를 가진 웹 사이트를 구축하는 데 사용됩니다. 1) 태그를 사용하여 웹 사이트 구조를 정의하십시오. 2) 예는 블로그 및 전자 상거래 웹 사이트의 구조를 보여줍니다. 3) 잘못된 레이블 중첩과 같은 일반적인 실수를 피하십시오. 4) HTTP 요청을 줄이고 시맨틱 태그를 사용하여 성능을 최적화합니다.

HTML 페이지에 이미지를 어떻게 삽입합니까?May 04, 2025 am 12:02 AM

TOINSERTANIMAGEINTOANHTMLPAGE, USETHETAGWITHSRCANDALTATTRIBUTES.1) USEALTTEXTFORACCESSIBLEANDSEO.2) AMPLEMESSRCSETFORRESPONSIVEIMAGES.3) ApplyLazyLoadingWithLoading = "Lazy"TOOPTIMIZEPEROUCTION.4) OPTIMIZEPEPERCESIVEIMAGES

See all articles

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

WebStorm Mac 버전

유용한 JavaScript 개발 도구

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

mPDF

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