关于浅述

踩坑：
说到，这个怕是入门的前端程序员都了解是做什么的，基本的浏览器解析规范；但还是前段日子踩到了这个坑。项目在我接手之前，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,
  

  这也就是恶魔的开始 – 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。

  如果你的页面添加了那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的
  

  标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

  这就是的作用。 
  

  2 使用：

  2.1 使用也很简单，就是在你的html页面的第一行添加""一行代码就可以了
  2.2 jsp的话，添加在<%@ page %>的下一行。
  2.3 不用区分大小写
  

  附：需要注意的问题

  没什么特别的，就是一定要将Doctype声明放在xHTML文档的顶部，上面哪怕多个html注释标记都不行。

  最好示例代码也加上Doctype，否则效果会有差异。尽管我们不给出这句声明浏览器照样会将HTML文档呈现出来，但是由于HTML版本导致的bug也许就出在这里。

  本文借鉴参考自百度百科，博主月南，ITOYO博主愤怒的coder，如有遗漏望多多包涵，欢迎指正错误与不足。