个人总结

Posted 2020-06-28 asdfasdfasdad

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

2、CSS中的RGBA、HSL、HSLA支持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事件

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

30、CSS中calc 属性支持ie9以上

32、attr属性支持ie8以上

33、linear-gradient、radial-gradial支持ie10以上

34、@media支持ie9以上

35、@keysframe支持ie10以上

36、@supports支持12以上

rule：指定一条具体的CSS规则，必须使用括号包裹
operator：使用or | and | not等操作符指定多条规则。

37、E::selection支持ie9以上

38、E::placeholder支持ie10-11以上

39、伪类选择器支持ie9以上

40、属性选择器支持ie7以上

41、关系选择器支持ie7以上

42、background-origin、background-clip、background-size支持ie9以上

background-clip:text; IE：不支持6.0-11.0 FF:不支持2.0-38.0

43、变换transform支持ie9以上、有部分支持 ie10以上

44、新伸缩flex支持ie11以上

45、动画animate支持ie10以上

46、媒体查询支持ie9以上

1>不支持嵌套媒体查询(ie9-11)。
2>使用height作为媒体查询条件，是包含滚动条在内的(ie9)

持续更新中...