HTML5 和 CSS3 的兼容问题

小草莓蹦蹦跳

已于 2023-04-26 18:51:12 修改

阅读量1k

点赞数

分类专栏：每日专栏 CSS3 HTML 文章标签： html5 css3 javascript

于 2020-07-27 23:46:38 首次发布

本文链接：https://blog.csdn.net/qq_38290251/article/details/107623900

版权

每日专栏同时被 3 个专栏收录

226 篇文章 4 订阅

订阅专栏

CSS3

55 篇文章 2 订阅

订阅专栏

HTML

31 篇文章 0 订阅

订阅专栏

一、对于HTML5的兼容

1、方式一：Coding JavaScript

2、方法二：使用Google的html5shiv包（推荐）

二、对于CSS3的兼容

1、那么如何在IE6~8浏览器中兼容响应式布局呢？

2、respond.js使用步骤

三、常见主流浏览器的内核及部分兼容性问题

四、Vue2.x 和 jQuery2.x 适配兼容 IE9+总结

一、对于HTML5的兼容

使用 HTML5 能让代码语义化更直观，而且更方便SEO优化。

但是此HTML5新标签在IE6/IE7/IE8上并不能识别，需要进行JavaScript处理。

以下就介绍两种兼容方式：

1、方式一：Coding JavaScript

如果是IE9以下的IE浏览器将创建HTML5标签，这样非IE9以下的浏览器就会忽视这段代码，也就不会有无谓的http请求了。

<!--[if lt IE9]> 
<script> 
   (function() {
     if (! 
     /*@cc_on!@*/
     0) return;
     var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(‘, ‘);
     var i= e.length;
     while (i--){
         document.createElement(e[i])
     } 
})() 
</script>
<![endif]-->

2、方法二：使用Google的html5shiv包（推荐）

html5shiv是用来兼容HTML5标签的插件。

<!--[if lt IE9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


或者

<!--[if lt IE9]> 
<script src="html5.js本地链接"></script>
<![endif]-->

不管使用以上哪种方法，都要初始化新标签的CSS。

/*html5*/

article,aside,dialog,footer,header,section,footer,nav,figure,menu {
    display:block;
}

因为HTML5在默认情况下表现为内联元素，对这些元素进行布局我们需要利用CSS手工把它们转为块状元素方便布局

二、对于CSS3的兼容

响应式布局，理想状态是对PC / 移动等各种终端进行响应。

媒体查询的支持程度是IE9+以及其他现代的浏览器，但是IE8在市场当中仍然占据了比较大量的市场份额，使我们不得不进行IE低端浏览器的考虑。

1、那么如何在IE6~8浏览器中兼容响应式布局呢？

这里我们需要借助这样一个文件：respond.js

Respond.js 是一个小脚本，支持在浏览器中使用 CSS3 媒体查询功能。

文件下载地址： GitHub - scottjehl/Respond: A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

关于respond.js的使用，有一些需要注意的地方，一旦不注意，在IE6-8中就无法显示出来。

2、respond.js使用步骤

① 书写基本样式

要想实现响应式布局，首先，需要书写基本的响应式布局的样式。

html,body {
	height: 100%;
}
@media only screen and (min-width: 480px){
	body {
		background: yellow;
	}
}
@media only screen and (min-width: 640px) and (max-width: 1024px) {
	body {
		background: green;
	}
}
@media screen and (min-width: 1024px){
	body {
		background: blue;
	}
}

② 接下来，需要理解respond.js的实现思路：

第一步，将head中所有外部引入的CSS文件路径取出来存储到一个数组当中；

第二步，遍历数组，并一个个发送AJAX请求；

第三步，AJAX回调后，分析response中的media query的min-width和max-width语法（注意，仅仅支持min-width和max-width），分析出viewport变化区间对应相应的css块；

第四步，页面初始化时和window.resize时，根据当前viewport使用相应的css块。