个人总结

1、fixed支持ie7以上，relative、fixed、absolute支持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;
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中创建请求server端的对象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)

47、获取网页中滚动栏滚动的距离

         window.pageXOffset/window.pageYOffset：支持ie9以上浏览器、chrome(标准模式、怪异模式)、FF(标准模式、怪异模式)

document.body.offsetTop/document.body.scrollLeft： chrome(标准模式、怪异模式)、IE(怪异模式)

        document.documentElement.scrollTop/document.documentElement.scrollLeft：:FF (标准模式)、IE(标准模式)

50、audi: 元素支持三种音频格式

audi: 元素支持三种音频格式

audio 元素同意多个source元素。source元素能够链接不同的音频文件。浏览器将使用第一个可识别的格式

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio>

51、flex属性支持ie11+

flex：复合属性
flex-grow：用来指定扩展比率。

flex-shrink:用来指定收缩比率。

flex-basis：用来指定伸缩基准值。


flex-flow:复合属性
flex-direction定义弹性盒子元素的排列方向。

flex-wrap：控制flex容器是单行或者多行。

align-content：相关属性
flex-start：各行向弹性盒容器的起始位置堆叠。
flex-end：各行向弹性盒容器的结束位置堆叠。

center：各行向弹性盒容器的中间位置堆叠。
space-between：各行在弹性盒容器中平均分布。
各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。
stretch：各行将会伸展以占用剩余的空间。


align-items：属性值
flex-start：弹性盒子元素的側轴（纵轴）起始位置的边界紧靠住该行的側轴起始边界。
flex-end：弹性盒子元素的側轴（纵轴）起始位置的边界紧靠住该行的側轴结束边界。
center：弹性盒子元素在该行的側轴（纵轴）上居中放置。（假设该行的尺寸小于弹性盒子元素的尺寸。则会向两个方向溢出同样的长度）。

baseline：如弹性盒子元素的行内轴与側轴为同一条，则该值与'flex-start'等效。其他情况下，该值将參与基线对齐。

stretch：假设指定側轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同一时候会遵照'min/max-width/height'属性的限制。

align-self：属性值
auto：假设'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，假设其没有父元素，则计算值为'stretch'。

flex-start：弹性盒子元素的側轴（纵轴）起始位置的边界紧靠住该行的側轴起始边界。
flex-end：弹性盒子元素的側轴（纵轴）起始位置的边界紧靠住该行的側轴结束边界。
center：弹性盒子元素在该行的側轴（纵轴）上居中放置。
（假设该行的尺寸小于弹性盒子元素的尺寸。则会向两个方向溢出同样的长度）。

baseline：如弹性盒子元素的行内轴与側轴为同一条，则该值与'flex-start'等效。其他情况下，该值将參与基线对齐。
stretch：假设指定側轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸。但同一时候会遵照'min/max-width/height'属性的限制。


justify-content：属性值
flex-start：弹性盒子元素将向行起始位置对齐。
flex-end：弹性盒子元素将向行结束位置对齐。

center：弹性盒子元素将向行中间位置对齐。
space-between：弹性盒子元素会平均地分布在行里。

space-around：弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。

order:用整数值来定义排列顺序，数值小的排在前面。能够为负值。

52、站点有关meat元素的说明

<meta name="keywords" content="站点关键字" />
<meta name="description" content="站点描写叙述" />
<meta name="baidu-site-verification" content="百度站长验证代码审核" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" />
<meta content="telephone=no,email=no" name="format-detection" />
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true"/>
<meta name="360-fullscreen" content="true"/>
<meta name="x5-page-mode" content="app"/>
<meta name="browsermode" content="application"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="苹果手机web标题" />

53、<input/>、<a>元素中CSS属性：outline: -webkit-focus-ring-color auto 5px;chrome支持 IE FF不支持

54、input的type类型为button和text。二个元素在同一行中且一样的高度一样的Line-height；二个元素在垂直居中错位一个像素

解决的方法：
1）设置float:属性

此问题是在chrome ff下发现的，ie8正常

55、word-break和word-wrap的差别？

word-break:break-all 同意在单词内换行;假设单词的中间位置正好在换行处。那么换行处的后间个单词换在下一行显示；
word-wrap:break-word 在长单词或 URL 地址内部进行换行;上和情况一下的，这个单词就直接换到下一行显示；不会把单词分面二块显示；

56、在输入框内点回车会跳转到别的页面。原因是有一个Button元素上有onclick事件

<button class="btn_base backBtn" onclick="window.location.href='{:U('SearchCustomer/index')}'">返回上一步</button>

57、iframe中的contentWindow与contentDocument中的差别？

contentWindow 兼容各个浏览器，可取得子窗体的 window 对象。
contentDocument Firefox 支持，> ie8 的ie支持。

可取得子窗体的 document 对象。

也是用的contentWindow。能够取到contentWindow.document

58、min-width、padding-left:属性和box-sizing在一起使用时， min-width在IE8下失效

59、

60、

持续更新中...