个人总结
2017-07-16 13:04 tlnshuju 阅读(180) 评论(0) 编辑 收藏 举报1、fixed支持ie7以上,relative、fixed、absolute支持width:100%;height:100%;
2、CSS中的RGBA、HSL、HSLA支持ie9以上浏览
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值的大小
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
场景:有二个div元素 div1和div2
假设给这二个div都绑定一个mouseout事件
假设从div1移动到div2时。div1中的event.relatedTarget得到的事件源是div2。
假设给这二个div都绑定一个 mouseover事件
假设从div1移动到div2时。div2中的event.relatedTarget得到的事件源是div1.
IE:event.offsetX和event.offsetY。
FF:event.layerX和event.layerY。
11、event.clientX和event.clientY 获取的元素的坐标假设有滚动栏,是不包括滚动栏的高度.
12、input.type ie:支持仅仅读 FF:支持读写
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
IE:支持currentStyle["prop"];
FF:支持getComputedStyle(obj, false)["prop"];
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
IE:obj.onselectstart = function(){ return false }
FF:-moz-user-select:none;
IE:支持ele.parentElement FF:支持ele.parentNode
IE:支持element.removeNode(true)
FF:支持 element.parentNode.removeChild(element);
IE:支持parentElement.children
FF:支持parentNode.childNodes
tagName仅仅能在HTML元素上获取标签名 nodeName在HTML元素和DOM上能获取
IE:支持onreadyStateChange事件
FF:支持DOMContentLoaded事件
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、
持续更新中...