个人总结

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、








持续更新中...

原文地址:https://www.cnblogs.com/tlnshuju/p/7190290.html