面试题总结

-------------------------------------------------------------css兼容性问题-------------------------------------------------------

1:div居中问题
Div居中问题 div设置 margin-left, margin-right 为 auto 时已经居中，
IE 不行，IE需要设定body居中，首先在父级元素定义text-algin: center;
这个的意思就是在父级元素内的内容居中。

2:浮动后设计边距IE6产生的双边距问题 (解决方法:给浮动元素加上display:inline)

3:元素设计最小宽度问题(min-width)
IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使
这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，
如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。
比如要设置背景图片，这个宽度是比较重要的。
要解决这个问题，可以这样：
#box{ 80px; height: 35px;}
html>body #box{ auto; height: auto; min- 80px; min-height: 35px;}

4:iE6下无法定义1px左右高度的容器
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,
例如
div{100px;height:1px;verflow:hidden;zoom:0.08 ; line-height:1px}

5:设计元素透明度问题 ff(opacity:0.5) iE(filter:alpha(opacity=50))

6:超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了,
解决方法是改变CSS属性的排列顺序: L-V-H-A
Code: <style type="text/css"> <!-- a:link {} a:visited {} a:hover {} a:active {} --> </style>

7: BOX模型解释不一致问题
在FF和IE 中的BOX模型解释不一致导致相差2px解决方法：div{margin:30px!important;margin:28px;}
注意这两个 margin的顺序一定不能写反， important这个属性IE不能识别，但别的浏览器可以识别。

8:游标手指cursor问题 (cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以 )

9:各大浏览器对元素的padding,margin初始值解析不一致问题(解决就是在页面初始化时*{padding:0px;margin:0px})

------------------------------------------js的兼容性问题-------------------------------------------------------------

1:事件监听的兼容问题 ff支持addEvenListener(event,function,boolean) ie支持attachEvent(event,function)

2:event.srcElement与event.target问题
IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有srcElement属性。
解决问题:var target=event.srcElement||event.target;

3:事件对象event的兼容问题 (解决 var ev=event||window.event)

4:event.x与event.y问题 (鼠标相对于页面左上角的位置)
问题说明：IE下，even对象有x、y属性，但是没有pageX、pageY属性；Firefox下，even对象有pageX、pageY属性，但是没有x、y属性。

解决方法：
var ev=event||window.event
var myX = ev.x ? ev.x : ev.pageX; var myY = ev.y ? ev.y:ev.pageY;

5:获取浏览器可视区兼容问题(var H=document.body.clientWidth||document.documentElement.clientWidth||window.innerWidth)

6:关于获取滚动条距离而出现的问题
当我们获取滚动条滚动距离时:
IE,Chrome: document.body.scrollTop
FF: document.documentElement.scrollTop
兼容处理:var scrollTop=document.documentElement.scrollTop||document.body.scrollTop

7:获取子元素时的兼容性问题 obj.childNodes返回所有的子节点 (解决:obj.children())

8:获取元素的firstChild,lastChild,nextSibling,previousSibling的兼容性问题
解决:
var first=firstChild||firstElementChild

9:创建Ajax对象时的兼容性问题
var xhr;

if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

10 :关于获取行外样式 obj.currentStyle[stylename] 和 window.getComputedStyle(obj,false)[stylename] 出现的兼容性问题
funtion getStyle(obj,name){
if(obj.currentStyle){
//IE
return obj.currentStyle[name];
}else{
//Chrom,FF
return window.getComputedStyle(obj,false)[name];
}
}

11:阻止事件传播兼容：
//js阻止事件传播，这里使用click事件为例
document.onclick=function(e){
var e=e||window.event;
if (e.stopPropagation) {
e.stopPropagation();//W3C标准
}else{
e.cancelBubble=true;//IE....
}
}

12: 阻止默认事件：
document.onclick=function(e){
var e=e||window.event;
if (e.preventDefault) {
e.preventDefault();//W3C标准
}else{
e.returnValue='false';//IE..
}
}

13:鼠标滚轮事件的兼容性问题

------------------------------------------前端优化-----------------------------------------

1: css文件/js文件进行压缩 (压缩工具 https://tool.lu/css/)

2: 使用css背景sprites技术合并图片(即把很多小图标合并到一张图片上) 如果不同的图片跳转到不同的页面,可以使用jsc操作

  <div onclick="go('http://www.baidu.com')"></div>

   function go(url){

           window.location.href=url;

 }

3: 合并js,合并css (可以减少http 的请求)