IE6\7\8과의 호환성이 html5 태그를 지원하지 않는 문제를 해결하는 몇 가지 방법
- 不言원래의
- 2018-05-08 15:28:181831검색
이 글에서는 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文档中的。
fdf8dc2fd1686feb29ef64a6cb71bc0b 这是xhtml原有的命名空间，到了html5以后被简化了，。
0bebac366585c3215ff263d503759678来自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 중국어 웹사이트의 기타 관련 기사를 참조하세요!