一、经验小总结
写代码的时候去w3c可以看到哪些属性支持哪些不支持，检验兼容性直接到对应的浏览器打开，先看看功能有没有问题，然后看控制台有没有报错，根据具体的报错信息可以定位到哪个框架或者哪条属性的问题。另外，如果项目需要兼容IE无论什么版本，js代码一定要规范，摆放的位置以及顺序都很重要 （一定要注意：1、框架得的Js移到head结束标签前面，自定义的根据你写的放在相应的位置，然后一般在外联样式文件的前面引入js框架。2、对页面进行维护修改的时候，在外联css样表中修改的样式直接写到该文件里的最下方，因为样式是下面覆盖上面的，所以想要将样式修改为你更改的，那么新添加的样式就要放下面，在html文件中引入其他外联文件也是同样的道理。3、js的排列顺序就是最终浏览器的加载顺序，依赖要放在前面，一般建议：把自定义js写到body里面，如果是在head里面，就不应该有任何执行语句，只建议放函数或者onload事件）；而且最好只用var来声明和定义变量，尽量少用css3特性。因为IE8既不支持HTML5也不支持CSS3 Media，可以通过加载JS文件，来实现代码实现兼容的效果。
二、首次项目经验总结（针对页面的恢复）
- 先到浏览器中，按f12到“控制台”查看报错信息，分析报错原因，然后对症下药。同时也可以到“网络”里面查看是否已经加载了你引入的全部js和css文件
- 如果是jquery框架的问题，在我的另一篇文章里写到了解决方法，这是链接 ：juqery兼容ie浏览器(ie8及一下版本).
- 将目前最新的能支持ie8的jquery添加到项目
针对于例如<!--[if IE 8]> <script src="jquery-compat-3.0.0-alpha1.min.js"></script>//注意路径要修改 <![endif]--><!--[if IE 8]><![endif]-->这种网页兼容条件注释代码书写也是有规范的，可以查看：网页兼容条件注释代码.但是这只是针对于一般情况而言，在做项目或者实战的时候，要以实际情况去分析，譬如我就出现了灵异现象。 - 当你在f12打开的调试框的“网络”里面看到新添加的jquery成功加载之后并且对应的报错信息没了，确认没有其他主要的报错信息，那么布局乱的问题就和js没有关系了，可以看到大部分内容都是正常显示，接下来需要做的就是
修改样式表。 - 首先先将所有行内样式和内联样式全部写到外联样式，因为一般修改的样式都会另外写到一个文件里面，或者在原有的外联文件里面添加，那么由于优先级：行内样式>内联样式>外联样式，避免受优先级的影响，统一将行内样式和内联样式移到外联样式中。（内联样式就是style标签里面的的样式（在head里面），行内样式就是style属性里面的样式（在body里面））
- 在外联样式引入的后面使用
if IE8注释语句里面引入一个新建立的样式表，然后覆盖掉IE不兼容的样式（原因上面已经提及）。当然也可以为IE8重新写一套样式，这样可以保证原来的页面样式不变，当然也可以直接把原来的样式改为IE8兼容的样式，但是IE8兼容的样式可能很丑，，，最快捷的方式就是直接引入相应的js实现样式兼容 - 我选择了第一种方法和最后一种。先说说第一种方法：其实IE8主要是因为不支持媒体查询，媒体查询主要是因为响应式布局，也就是做出来的网页要适应不同设备，为了美观，在不同的设备上，可能会修改一些样式，比如很多网页在pc端和手机端看到的效果一般都是不同的。
- 修改样式的时候，可以借助谷歌浏览器查看在pc端以及手机端看到的效果，鼠标悬浮，查找到相应的代码块以及样式，如果有媒体查询，则将媒体查询里面的代码复制粘贴到你新建立的样式文件中，注意，不要复制媒体查询的那个语句，例如
@media screen and (min width:768px)，因为这句话，IE8不认识，自然就不会去看它里面的代码了 - 样式表的修改，这里就不详细述说了，但是有几个点是我目前总结的：
（1）媒体查询中的样式涉及到display:none/block/inline-block这之类的，在IE8里就会看到有些内容被显示或者隐藏了
（2）如果媒体查询中的样式涉及到浮动，那么在IE8里就可能出现布局浮动混乱
（3）IE8认不到一些h5新添加的标签，例如结构标签<head><section>等等，可以通过Js自定义这些标签，现在有一个js文件就是解决这类问题的，可以在网上搜索下载，引入到自己的项目中，注意路径不要错误。我的是：
<!--[if lt IE 9]>
<script src="y/js/html5.min.js"></script>//注意修改路径
<![endif]-->
（4）如果你发现修改之后有些颜色或者其他样式修改之后还是显示不出来，可以用!important因为这个的优先级最高。
(5)IE8调试过程中，可能会出现一些刷新不及时的现象，可以按f12在“网络”里面清除缓存，然后再疯狂刷新，或者切换到ie11或者其他版本再切换回来，或者重启浏览器
（6）如果你是本地文件且用的是vscode的话，要想看到该文件放在服务器上的效果，就得鼠标右键点击open with live sever这样就相当于在服务器上访问该文件了，在浏览器的地址栏里可以看到路径里面会有端口号，将该路径复制粘贴到你想用的浏览器的地址栏里 - 第二种方法：js神补丁作用，放在上面写到的
<!--[if IE 8]><![endif]-->注释语句的前面。注意修改路径！！！
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="html5shiv.min.js"></script>
<script src="respond.min.js"></script>
<![endif]-->
注意：
html5shiv.js说明： 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。
respond.min.js说明： 让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
1839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
