Web前端面試指導(dǎo):談?wù)劄g覽器的兼容性

我們在開發(fā)的時候會明確項目要兼容哪些瀏覽器的最低版本伸辟,我之前的項目要求兼容IE8.0以上的版本簿姨,Chrome 48以上痢甘,F(xiàn)ireFox 44以上扁耐。有了這些最基本的要求,在開發(fā)中就是要考慮到CSS樣式和JavaScript的在這些瀏覽器的兼容性了

(一)html部分

1.H5新標(biāo)簽在IE9以下的瀏覽器識別?

<!--[iflt?IE9]>

<script?type="text/javascript"src="js/html5shiv.js"></script>

<![endif]-->

html5shiv.js下載地址

https://github.com/aFarkas/html5shiv/releases

2.ul標(biāo)簽內(nèi)外邊距問題ul標(biāo)簽在IE6\IE7中产阱,有個默認(rèn)的外邊距,但是在IE8以上及其他瀏覽器中有個默認(rèn)的內(nèi)邊距块仆。

解決方法:統(tǒng)一設(shè)置ul的內(nèi)外邊距為0

(二)CSS樣式的兼容性

1.css的hack問題:主要針對IE的不同版本构蹬,不同的瀏覽器的寫法不同

IE的條件注釋hack:

2.IE6雙邊距問題:IE6在浮動后,又有橫向的margin悔据,此時庄敛,該元素的外邊距是其值的2倍

?????? 解決辦法:display:block;

3.IE6下圖片的下方有空隙

?解決方法:給img設(shè)置display:block;

4.IE6下兩個float之間會有個3px的bug

????? 解決辦法:給右邊的元素也設(shè)置float:left;

5.IE6下沒有min-width的概念,其默認(rèn)的width就是min-width

6.IE6下在使用margin:0 auto;無法使其居中

解決辦法:為其父容器設(shè)置text-align:center;

7.被點擊過后的超鏈接不再具有hover和active屬性

解決辦法:按lvha的順序書寫css樣式科汗,

":link": a標(biāo)簽還未被訪問的狀態(tài)藻烤;

":visited": a標(biāo)簽已被訪問過的狀態(tài);

":hover": 鼠標(biāo)懸停在a標(biāo)簽上的狀態(tài)头滔;

":active": a標(biāo)簽被鼠標(biāo)按著時的狀態(tài)怖亭;

8.在使用絕對定位或者相對定位后,IE中設(shè)置z-index失效坤检,原因是因為其元素依賴于父元素的z-index兴猩,但是父元素默認(rèn)為0, 子高父低早歇,所以不會改變顯示的順序

9.IE6下無法設(shè)置1px的行高倾芝,原因是由其默認(rèn)行高引起的

解決辦法:為期設(shè)置overflow:hidden;或者line-height:1px;

(三)JavaScript的兼容性

1.標(biāo)準(zhǔn)的事件綁定方法函數(shù)為addEventListener讨勤,但I(xiàn)E下是attachEvent;

2.事件的捕獲方式不一致晨另,標(biāo)準(zhǔn)瀏覽器是由外至內(nèi)潭千,而IE是由內(nèi)到外,但是最后的結(jié)果是將IE的標(biāo)準(zhǔn)定為標(biāo)準(zhǔn)

3.window.event獲取的借尿。并且獲取目標(biāo)元素的方法也不同刨晴,標(biāo)準(zhǔn)瀏覽器是event.target,而IE下是event.srcElement

4.在低版本的IE中獲取的日期處理函數(shù)的值不是與1900的差值垛玻,但是在高版本的IE中和標(biāo)準(zhǔn)瀏覽器保持了一致割捅,獲取的值也是與1900的差值。???

比如:var?year= new Date().getYear();

5.ajax的實現(xiàn)方式不同帚桩,這個我所理解的是獲取XMLHttpRequest的不同亿驾,IE下是activeXObject

6.IE中不能操作tr的innerHtml7.獲得DOM節(jié)點的父節(jié)點、子節(jié)點的方式不同

其他瀏覽器:parentNode??parentNode.childNodes

IE:parentElement?parentElement.children

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末账嚎,一起剝皮案震驚了整個濱河市莫瞬,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌郭蕉,老刑警劉巖疼邀,帶你破解...
    沈念sama閱讀 212,383評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異召锈,居然都是意外死亡旁振,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,522評論 3 385
  • 文/潘曉璐 我一進(jìn)店門涨岁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來拐袜,“玉大人,你說我怎么就攤上這事梢薪〉牌蹋” “怎么了?”我有些...
    開封第一講書人閱讀 157,852評論 0 348
  • 文/不壞的土叔 我叫張陵秉撇,是天一觀的道長甜攀。 經(jīng)常有香客問我,道長琐馆,這世上最難降的妖魔是什么规阀? 我笑而不...
    開封第一講書人閱讀 56,621評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮瘦麸,結(jié)果婚禮上姥敛,老公的妹妹穿的比我還像新娘。我一直安慰自己瞎暑,他們只是感情好彤敛,可當(dāng)我...
    茶點故事閱讀 65,741評論 6 386
  • 文/花漫 我一把揭開白布与帆。 她就那樣靜靜地躺著,像睡著了一般墨榄。 火紅的嫁衣襯著肌膚如雪玄糟。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,929評論 1 290
  • 那天袄秩,我揣著相機(jī)與錄音阵翎,去河邊找鬼。 笑死之剧,一個胖子當(dāng)著我的面吹牛郭卫,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播背稼,決...
    沈念sama閱讀 39,076評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼贰军,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了蟹肘?” 一聲冷哼從身側(cè)響起词疼,我...
    開封第一講書人閱讀 37,803評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎帘腹,沒想到半個月后贰盗,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,265評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡阳欲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,582評論 2 327
  • 正文 我和宋清朗相戀三年舵盈,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片球化。...
    茶點故事閱讀 38,716評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡秽晚,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出赊窥,到底是詐尸還是另有隱情,我是刑警寧澤狸页,帶...
    沈念sama閱讀 34,395評論 4 333
  • 正文 年R本政府宣布悼院,位于F島的核電站锨用,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜慢味,卻給世界環(huán)境...
    茶點故事閱讀 40,039評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望章姓。 院中可真熱鬧啥刻,春花似錦、人聲如沸坝初。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,798評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至绢要,卻和暖如春吏恭,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背重罪。 一陣腳步聲響...
    開封第一講書人閱讀 32,027評論 1 266
  • 我被黑心中介騙來泰國打工樱哼, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人剿配。 一個月前我還...
    沈念sama閱讀 46,488評論 2 361
  • 正文 我出身青樓搅幅,卻偏偏與公主長得像,于是被迫代替她去往敵國和親呼胚。 傳聞我的和親對象是個殘疾皇子茄唐,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,612評論 2 350

推薦閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)砸讳。 注意:講述HT...
    kismetajun閱讀 27,450評論 1 45
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案琢融? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評論 1 92
  • (方法是:每寫一小段代碼(布局中的一行或者一塊)我們都要在不同的瀏覽器中看是否兼容,當(dāng)然熟練到一定的程度就沒這么麻...
    Air丹閱讀 1,768評論 0 6
  • 一簿寂、如何調(diào)試 IE 瀏覽器 IE7以上版本自帶的開發(fā)者工具漾抬,IE6可以用border的方法;例:IE11的開發(fā)者工...
    __Qiao閱讀 1,125評論 2 17
  • ?前端面試題匯總 一常遂、HTML和CSS 21 你做的頁面在哪些流覽器測試過纳令?這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,220評論 0 8