이 글에서는 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=['header','footer','article','aside','section','nav','menu','hgroup','details','dialog','figure','figcaption'],
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'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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
HTML : 구조, CSS : 스타일, 자바 스크립트 : 동작Apr 18, 2025 am 12:09 AM웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. 1. HTML은 웹 페이지 구조를 정의하고, 2. CSS는 웹 페이지 스타일을 제어하고 3. JavaScript는 동적 동작을 추가합니다. 그들은 함께 현대 웹 사이트의 프레임 워크, 미학 및 상호 작용을 구축합니다.
HTML의 미래 : 웹 디자인의 진화 및 트렌드Apr 17, 2025 am 12:12 AMHTML의 미래는 무한한 가능성으로 가득합니다. 1) 새로운 기능과 표준에는 더 많은 의미 론적 태그와 WebComponents의 인기가 포함됩니다. 2) 웹 디자인 트렌드는 반응적이고 접근 가능한 디자인을 향해 계속 발전 할 것입니다. 3) 성능 최적화는 반응 형 이미지 로딩 및 게으른로드 기술을 통해 사용자 경험을 향상시킬 것입니다.
HTML vs. CSS vs. JavaScript : 비교 개요Apr 16, 2025 am 12:04 AM웹 개발에서 HTML, CSS 및 JavaScript의 역할은 다음과 같습니다. HTML은 컨텐츠 구조를 담당하고 CSS는 스타일을 담당하며 JavaScript는 동적 동작을 담당합니다. 1. HTML은 태그를 통해 웹 페이지 구조와 컨텐츠를 정의하여 의미를 보장합니다. 2. CSS는 선택기와 속성을 통해 웹 페이지 스타일을 제어하여 아름답고 읽기 쉽게 만듭니다. 3. JavaScript는 스크립트를 통해 웹 페이지 동작을 제어하여 동적 및 대화식 기능을 달성합니다.
HTML : 프로그래밍 언어입니까 아니면 다른 것입니까?Apr 15, 2025 am 12:13 AMHtmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworksporstylingandjavaScriptOfforIncincivity, WebDevelopment 향상.
HTML : 웹 페이지 구조 구축Apr 14, 2025 am 12:14 AMHTML은 웹 페이지 구조를 구축하는 초석입니다. 1. HTML은 컨텐츠 구조와 의미론 및 사용 등을 정의합니다. 태그. 2. SEO 효과를 향상시키기 위해 시맨틱 마커 등을 제공합니다. 3. 태그를 통한 사용자 상호 작용을 실현하려면 형식 검증에주의를 기울이십시오. 4. 자바 스크립트와 결합하여 동적 효과를 달성하기 위해 고급 요소를 사용하십시오. 5. 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함되며 검증 도구가 필요합니다. 6. 최적화 전략에는 HTTP 요청 감소, HTML 압축, 시맨틱 태그 사용 등이 포함됩니다.
텍스트에서 웹 사이트로 : HTML의 힘Apr 13, 2025 am 12:07 AMHTML은 웹 페이지를 작성하는 데 사용되는 언어로, 태그 및 속성을 통해 웹 페이지 구조 및 컨텐츠를 정의합니다. 1) HTML과 같은 태그를 통해 문서 구조를 구성합니다. 2) 브라우저는 HTML을 구문 분석하여 DOM을 빌드하고 웹 페이지를 렌더링합니다. 3) 멀티미디어 기능을 향상시키는 HTML5의 새로운 기능. 4) 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함됩니다. 5) 최적화 제안에는 시맨틱 태그 사용 및 파일 크기 감소가 포함됩니다.
HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AMWebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.
HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AMHTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
드림위버 CS6
시각적 웹 개발 도구
WebStorm Mac 버전
유용한 JavaScript 개발 도구
ZendStudio 13.5.1 맥
강력한 PHP 통합 개발 환경
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
