踩坑：
说到，这个怕是入门的前端程序员都了解是做什么的，基本的浏览器解析规范；但还是前段日子踩到了这个坑。项目在我接手之前，jsp文件是写好的，我只是在基础上进行界面的优化（做后端的入行必然会做几个月前端），在调整界面动态加载大小，及jQuery的一些效果时出现了火狐和谷歌浏览器不兼容的问题。一开始我以为是部分属性是CSS Hack；（确实有部分是不兼容的，后面会讲到关于这个的另一个我踩的坑，并附上我的解决方案）；但经过各种调试 ，最终发现问题不同浏览器对代码的解析不同的问题，源码根本原因是 $(window).height在谷歌和火狐上解析的大小不同，导致动态加载的
- 在页面动态切换中无法正常显示；
-
//异步加载关心数据 $.post("/rr/store/panorama/queryFrontMonitorCare.do", function (data) { var menu_layer_inner = $(".menu_layer_inner"); menu_layer_inner.empty(); $.each(data, function (i, v) { var tmpKey = v.tmpKey; var tmpName = v.tmpName; var myCare = $(".myCareClone").clone(); myCare.removeClass("myCareClone").addClass("myCare").css({display: "block"}); var careLink = myCare.find(".careLink"); careLink.attr("href", "front/broken.jsp?tmpKey=" + tmpKey); careLink.text('> ' + tmpName); menu_layer_inner.append(myCare); }); //设置iframe高度 var careSize = data.length >= 5 ? data.length : 5; $(".rr_menu,.menu_layer").css({height: $(window.parent.document).height() + "px"}); $("#myframe").css({width: $(window).width() - 220 + "px", height: (careSize * 770 + 180) + "px"}); $("#rrFrame").css({width: $(window).width() - 220 + "px", height: (careSize * 770 + 180) + "px"}); });大概代码就贴这么多，其他的就涉及到公司业务了，这个效果在火狐是看不到生成的
-
的。最后发现是之前同事写jsp时没加，导致火狐，谷歌不同的解析模式，导致出现类似不兼容的问题。前面说的是踩坑。下面附上，填坑资料；
填坑：
-
什么是？
在HTML文档初，往往会有这么一句话，那么它的意义是什么呢？它是html5标准网页声明,全称为Document Type HyperText Mark-up Language，意思为文档种类为超文本标记性语言或超文本链接标示语言，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。表示网页采用html5， 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
这个标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
public 这行声明了文档的根元素是 html，它在公共标识符被定义为 “-//W3C//DTD XHTML 1.0
Strict//EN” 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到，浏览器将使用公共标识符后面的URL 作为寻找 DTD 的位置。的重要性？
1作用：声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。
document.compatMode：
BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。
CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,这也就是恶魔的开始 – 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。
如果你的页面添加了<!DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。
这就是<!DOCTYPE html>的作用。2 使用：
2.1 使用也很简单，就是在你的html页面的第一行添加"<!DOCTYPE html>"一行代码就可以了 2.2 jsp的话，添加在<%@ page %>的下一行。 2.3 不用区分大小写附：需要注意的问题
没什么特别的，就是一定要将Doctype声明放在xHTML文档的顶部，上面哪怕多个html注释标记都不行。
最好示例代码也加上Doctype，否则效果会有差异。尽管我们不给出这句声明浏览器照样会将HTML文档呈现出来，但是由于HTML版本导致的bug也许就出在这里。
本文借鉴参考自百度百科，博主月南，ITOYO博主愤怒的coder，如有遗漏望多多包涵，欢迎指正错误与不足。