渲染模式问题
欢迎大家来到我们 Modern Web ● 提升网站兼容性从这里开始 系列的渲染模式问题专题，在W3C的标准出台前，浏览器对网页的渲染没有统一的标准，各家有各家的方式。当W3C标准出来之后，标准的渲染模式就称之为“标准模式”，而各家浏览器还保留了原来的渲染方式来兼容旧版本的网站，称之为“Quirks Mode”（一般翻译为“怪异模式”或者“兼容模式”）。那浏览器怎么知道用“标准模式”还是“兼容模式”来解析你的网站呢？现在的浏览器厂商们基本都是用Doctype来判断。如果你的网站是采用HTML5标准的网站，那么请记得在网页的首行加上标准HTML5的Doctype声明：
<!DOCTYPE html>
如果你的网页没有Doctype的声明，那么浏览器就认为你的网站是老旧版本，浏览器将启用“兼容模式”来解析你的网站，这样对于用户来说，将不能够得到足够优秀的体验。
1 使用dev.modern.ie网站检测:
点击链接https://dev.windows.com/zh-cn/microsoft-edge/tools/staticscan/在输入框输入网站URL，点击查询即可检测网站问题：
如果出现“渲染模式”问题，如下图所示：
则使用下列解决方案进行改进.
2 检查是否缺失缺失Doctype
在网站页面首行添加标准Doctype的声明：<!DOCTYPE html>
3 检查是否正确使用X-UA-Compatible属性标签
在页面检查是否存在下面类似的代码。
|
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <meta http-equiv="X-UA-Compatible" content="IE=8"> |
找到以上类似的代码，在content属性里面添加Edge：
|
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7,Edge"> <meta http-equiv="X-UA-Compatible" content="IE=8,Edge"> |
4 检查网站是否处于Compatibility View List
检查网站是否在兼容性视图列表中。兼容性视图列表是一个xml文件，其存储地址见下表：
|
IE: C:\Users\%YOUR_USERNAME%\AppData\Local\Microsoft\Internet Explorer\ IECompatData\iecompatdata.xml
EDGE C:\Users\%YOUR_USERNAME%\AppData\Local\MicrosoftEdge\ SharedCacheContainers\MicrosoftEdge_iecompat\IECompatData.xml |
这个文件维护着系统下的网站与IE或者Edge的兼容信息，每日更新。如果你发现你的网站存在于兼容列表中，说明你的网站存在不符合HTML5标准的内容，请修改相应的内容，然后向iepo@microsoft.com 发送电子邮件，请求在 Web 上有可用更新时，将你的网站移出兼容性视图列表。邮件需要包含以下内容：所有者名称、公司职务、电子邮件地址、电话号码、公司名称、街道地址、网站地址。 微软将审查提供的信息，并在下一个计划的列表更新时从“兼容性视图列表”中删除你的站点。更多有关兼容性列表的内容，请参阅: http://aka.ms/cvlist
5 检查Doctype格式是否有效
检查是否使用了有效格式正确的Doctype，下面是正确写法：
|
<!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
Appendix：
下面的一些网站链接介绍如何使用改善网站的兼容性供大家参考：
§Web App Platform: http://dev.windows.com
§Microsoft Edge开发者博客: http://blogs.windows.com/msedgedev/
§F12开发者工具使用: http://aka.ms/mva-f12
§微软技术培训： http://aka.ms/feature-detection
同时，我们提供了微信版本的dev.modern.ie工具，扫描下方二维码，轻松测试网站。
网站兼容性测试（微信版）
浙公网安备 33010602011771号