[置顶] 个人总结

1、fixed支持ie7以上，relative、fixed、absolute支持width:100%;height:100%;

2、rgba支持ie9以上浏览

3、直接给未声明变量赋值在ie8以下会报错

 city = document.getElementById("input").value;//$("input[name='city']").val();
  alert(city);

4、在ie8下在一个div中，有一个input元素，如果div及它的外层元素定义line-height时，如果input不设置line-height，可以会造成input距离div顶部之间有间距，大写取决于line-height值的大小

5、<meta http-equiv="X-UA-Compatible" content="IE=8">

   http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

6、当内联内容溢出块容器时，将溢出部分替换为（...）

overflow:hidden;
width:200px;
white-space:nowrap;
text-overflow:ellipsis;

text-overflow属性值：
clip：当内联内容溢出块容器时，将溢出部分裁切掉。
ellipsis：当内联内容溢出块容器时，将溢出部分替换为（...）。

white-space属性值:
normal：默认处理方式。
pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。可查阅pre对象

nowrap：强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。
pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。
pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。

7、获取浏览器body的大小

// window.innerWidth 不支持ie8以下
// document.documentElement.clientWidth  在怪异模式下值为0
// document.body.clientWidth 支持 ie ff chrome

var width = document.body.clientWidth || document.documentElement.clientWidth || window.innerWidth;
var height = document.body.clientHeight || document.documentElement.clientHeight || window.innerHeight;

8、srcElement与target区别

     获得事件源的对象 IE:支持srcElement  FF:支持 target

9、toElement 与relatedTarget区别， IE支持 toElement   FF支持relatedTarget

      场景：有二个div元素 div1和div2

      假设给这二个div都绑定一个mouseout事件

      如果从div1移动到div2时，div1中的event.relatedTarget得到的事件源是div2。

      假设给这二个div都绑定一个 mouseover事件

      如果从div1移动到div2时，div2中的event.relatedTarget得到的事件源是div1.

10、event.offsetX 与 event.layerX的区别  如果元素有滚动条的话，那么得到值是包含滚动条的滚动的高度

   IE：event.offsetX和event.offsetY。

   FF：event.layerX和event.layerY。

11、event.clientX和event.clientY 获取的元素的坐标如果有滚动条，是不包含滚动条的高度.

12、input.type  ie：支持只读 FF：支持读写

13、自定义标签属性

    IE：支持 div.value 或 div["value"];

    FF：支持div.attribute("value")

14、event事件 IE：支持window.event和event   FF:支持event

15、阻止冒泡 IE:支持event.cancelBubble = true; FF:支持event.stopPropagation();

16、阻止默认事件  IE：支持 return false.  FF:支持event.preventDefault();

17、绑定事件 IE:支持attacheEvent  FF：支持addEventListener

18、如何获取CSS样式兼容问题

       IE:支持currentStyle["prop"];

       FF:支持getComputedStyle(obj, false)["prop"];

19、如何获取元素中的class属性值

       IE:支持div.className

       FF:支持div.getAttribute("class");

20、IE和FF：支持document.getElementById()  IE8以上和FF都支持document.querySelector()

21、ie支持innerText FF支持textContent;

22、IE获取的元素标签名是大写的，FF获取的是小写

23、获取元素元素距上和左的距离 object.offsetTop  object.offsetLeft

23、阻止选中body中的文本兼容问题

        IE:obj.onselectstart = function(){ return false }

        FF:-moz-user-select:none;

24、获取父元素兼容性

        IE:支持ele.parentElement   FF:支持ele.parentNode

25、删除元素兼容性问题

        IE:支持element.removeNode(true)

        FF:支持 element.parentNode.removeChild(element);

26、获取子元素兼容性问题

       IE:支持parentElement.children

       FF:支持parentNode.childNodes

27、tagName与nodeName区别

         tagName只能在HTML元素上获取标签名  nodeName在HTML元素和DOM上能获取

28、当 html中的dom、JS、CSS加载完，但页面资源未完全加载完时，会触发一个事件

        IE:支持onreadyStateChange事件

        FF:支持DOMContentLoaded事件

30、在ajax中创建请求服务器端的对象IE7及以上浏览器支持 new XMLHttpRequest()    IE6：支持new window.ActiveXObject("Micrisoft.XMLHTTP")

31、

持续更新中...