2. 常見兼容性問題?
png24位的圖片在iE6瀏覽器上出現(xiàn)背景,解決方案是做成PNG8.
* 瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的*{margin:0;padding:0;}來統(tǒng)一。
* IE6雙邊距bug:塊屬性標(biāo)簽float后,又有橫行的margin情況下,在ie6顯示margin比設(shè)置的大。
3、 浮動(dòng)ie產(chǎn)生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 100px;}
這種情況之下IE會(huì)產(chǎn)生20px的距離,解決方案是在float的標(biāo)簽樣式控制中加入 ——_display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(_這個(gè)符號(hào)只有ie6會(huì)識(shí)別)
漸進(jìn)識(shí)別的方式,從總體中逐漸排除局部。
首先,巧妙的使用“\9”這一標(biāo)記,將IE游覽器從所有情況中分離出來。
接著,再次使用“+”將IE8和IE7、IE6分離開來,這樣IE8已經(jīng)獨(dú)立識(shí)別。
css
.bb{
backgr
4、ound-color:#f1ee18;/*所有識(shí)別*/
.background-color:#00deff\9; /*IE6、7、8識(shí)別*/
+background-color:#a200ff;/*IE6、7識(shí)別*/
_background-color:#1e0bd1;/*IE6識(shí)別*/
}
* IE下,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性.
解決方法:統(tǒng)一通過getA
5、ttribute()獲取自定義屬性.
* IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.
* 解決方法:(條件注釋)缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請求數(shù)。
* Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示,
可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
超鏈接訪問過后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問過的超鏈接樣式不在具有hover和active了
6、解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
3. html5有哪些新特性、移除了那些元素?如何處理HTML5新標(biāo)簽的瀏覽器兼容問題?如何區(qū)分 HTML 和 HTML5?
HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集,主要是關(guān)于圖像,位置,存儲(chǔ),多任務(wù)等功能的增加。
* 繪畫 canvas
用于媒介回放的 video 和 audio 元素
本地離線存儲(chǔ) localStorage 長期存儲(chǔ)數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
sessionStorage 的數(shù)
7、據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
語意化更好的內(nèi)容元素,比如 article、footer、header、nav、section
表單控件,calendar、date、time、email、url、search
新的技術(shù)webworker, websockt, Geolocation
* 移除的元素
純表現(xiàn)的元素:basefont,big,center,font, s,strike,tt,u;
對可用性產(chǎn)生負(fù)面影響的元素:frame,frameset,noframes;
支持HTML5新標(biāo)簽:
* IE8/IE7/IE6支持通過document
8、.createElement方法產(chǎn)生的標(biāo)簽,
可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽,
瀏覽器支持新標(biāo)簽后,還需要添加標(biāo)簽?zāi)J(rèn)的樣式:
* 當(dāng)然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
4. 談?wù)勀隳銓TML5的離線儲(chǔ)存?
localStorage 長期存儲(chǔ)數(shù)據(jù),瀏覽器關(guān)閉后數(shù)據(jù)不丟失;
sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除。
5. 請描述一下 cookies,sessi
9、onStorage 和 localStorage 的區(qū)別?
cookie在瀏覽器和服務(wù)器間來回傳遞。 sessionStorage和localStorage不會(huì)
sessionStorage和localStorage的存儲(chǔ)空間更大;
sessionStorage和localStorage有更多豐富易用的接口;
sessionStorage和localStorage各自獨(dú)立的存儲(chǔ)空間;
CSS
1. CSS引入的方式有哪些? link和@import的區(qū)別是?
內(nèi)聯(lián) 內(nèi)嵌 外鏈 導(dǎo)入
區(qū)別 :同時(shí)加載
前者無兼容性,后者CSS2.1以下瀏覽器不支持
10、 Link 支持使用javascript改變樣式,后者不可
2. CSS選擇符有哪些?哪些屬性可以繼承?優(yōu)先級(jí)算法如何計(jì)算?內(nèi)聯(lián)和important哪個(gè)優(yōu)先級(jí)高?
標(biāo)簽選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標(biāo)簽選擇
后者優(yōu)先級(jí)高
3. 為什么要初始化CSS樣式?
- 因?yàn)闉g覽器的兼容問題,不同瀏覽器對有些標(biāo)簽的默認(rèn)值是不同的,如果沒對CSS初始化往往會(huì)出現(xiàn)瀏覽器之間的頁面顯示差異。
- 當(dāng)然,初始化樣式會(huì)對SEO有一定的影響,但魚和熊掌不可兼得,但力求影響最小的情況下初始化。
*最簡單的初始化方法就是: * {padding: 0
11、; margin: 0;} (不建議)
淘寶的樣式初始化:
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6
12、{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
13、
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
4. 如果需要手動(dòng)寫動(dòng)畫,你認(rèn)為最小時(shí)間間隔是多久,為什么?
多數(shù)顯示器默認(rèn)頻率是60Hz,即1秒刷新60次,所以理論上最小間隔為1/60*1000ms = 16.7ms
5. displa
14、y:inline-block 什么時(shí)候會(huì)顯示間隙?
移除空格、使用margin負(fù)值、使用font-size:0、letter-spacing、word-spacing
Javascript
1. javascript的typeof返回哪些數(shù)據(jù)類型
Object number function boolean underfind
2. IE和DOM事件流的區(qū)別
1.執(zhí)行順序不一樣、
2.參數(shù)不一樣
3.事件加不加on
4.this指向問題
3.ajax請求的時(shí)候get 和post方式的區(qū)別
一個(gè)在url后面 一個(gè)放在虛擬載體里面
有大小限制
安全問題
應(yīng)用
15、不同 一個(gè)是論壇等只需要請求的,一個(gè)是類似修改密碼的
4.Node.js的適用場景?
高并發(fā)、聊天、實(shí)時(shí)消息推送
5.Jquery與jQuery UI 有什么區(qū)別?
jQuery是一個(gè)js庫,主要提供的功能是選擇器,屬性修改和事件綁定等等。
*jQuery UI則是在jQuery的基礎(chǔ)上,利用jQuery的擴(kuò)展性,設(shè)計(jì)的插件。
提供了一些常用的界面元素,諸如對話框、拖動(dòng)行為、改變大小行為等等
其他問題
1. 常使用的庫有哪些?常用的前端開發(fā)工具?開發(fā)過什么應(yīng)用或組件?
2. 最近看的一篇Javascript的文章是?
3. WEB應(yīng)用從服務(wù)器主動(dòng)推送Data到客戶端有那些方式?
4. 頁面重構(gòu)怎么操作?
5. 列舉IE 與其他瀏覽器不一樣的特性?
參考網(wǎng)站