面試題總結

-------------------------------------------------------------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{ width: 80px; height: 35px;}
html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

4:iE6下沒法定義1px左右高度的容器
IE6下這個問題是由於默認的行高形成的,解決的方法也有不少,
例如
div{width: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 的請求)