1.如何調(diào)試 IE 瀏覽器
- 使用高版本IE的控制臺(IE8+)
- border: 1px solid red; 或outline: 1px solid red;(outline的好處是不占寬度律想,但有些IE6/7不支持)
- 在瀏覽器地址欄輸入javascript:alert(document.get…)昂秃,
如:javascript:alert(document.getElementsByTagName("div")[0].style.border="1px solid red")
2.什么是CSS hack楼咳?在 CSS 和 HTML里如何寫 hack摔桦?在 CSS 中 IE 7落恼、IE 8的 hack 方式棱貌?
不同的瀏覽器對css的解析方式不一樣蠕搜,會導(dǎo)致頁面在不同瀏覽器下表現(xiàn)不一致僧鲁,針對不同的瀏覽器寫不同的css樣式您宪,使得頁面最終在不同瀏覽器表現(xiàn)大體相同,這就叫css hack。
- css 中寫hack的方式:屬性加前綴蚕键。
下劃線:如.selector { _color: red; }
,IE6能識別,IE7不能識別衰粹;
星號:如.selector { *color: red; }
,IE6和IE7都能識別锣光;
\9:如.selector { color: red\9; }
,IE6/7/8都能識別; - html中寫hack:添加條件注釋铝耻。(IE10開始不支持cc注釋了嫉晶。)
如:下面的條件注釋表示IE8及以下將應(yīng)用ie8.css樣式。
<!--[if lte IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->
3.列舉幾種 瀏覽器兼容問題
IE6/7只支持inline轉(zhuǎn)換成inline-block田篇,不支持block轉(zhuǎn)換成inline-block
解決方法:.sellector { display:inline-block; *zoom:1; *display:inline;}
IE6/7只支持a標(biāo)簽使用hover替废,不支持其他標(biāo)簽使用hover。
IE6/7不支持最大最小寬高
4.針對兼容泊柬、多瀏覽器覆蓋有什么看法椎镣?漸進增強和優(yōu)雅降級是什么意思?
- 在開發(fā)網(wǎng)頁的時候兽赁,不可能做到所有的瀏覽器都兼容状答,而應(yīng)該根據(jù)瀏覽器市場占有率,兼容主流刀崖、淘汰末流惊科。而且并不需要頁面在各個瀏覽器上表現(xiàn)效果都一致,對于高級瀏覽器功能全開亮钦,提供最好的用戶體驗馆截。對于低級瀏覽器頁面展示效果可以降低標(biāo)準(zhǔn)。
- 漸進增強:先兼容低版本瀏覽器使其實現(xiàn)基本的功能蜂莉,再對高級瀏覽器進行效果蜡娶、交互等改進和追加功能。
- 優(yōu)雅降級:一開始就針對高版本瀏覽器進行頁面構(gòu)建映穗,然后再針對低版本瀏覽器進行兼容窖张。
5.reset.css和normalize.css分別是做什么的?為什么推薦使用 normalize.css?
兩者都是全局樣式重置蚁滋,reset.css相對暴力宿接,不管你有沒有用赘淮,統(tǒng)統(tǒng)重置成一樣的效果,且影響的范圍很大睦霎,講求跨瀏覽器的一致性拥知。normalize 相對平和,注重通用的方案碎赢,重置掉該重置的樣式低剔,保留有用的 瀏覽器默認樣式,同時進行一些 bug 的修復(fù)肮塞。這點是 reset.css 所缺乏的襟齿,也是推薦使用normalize.css的原因。
6.IE盒模型和標(biāo)準(zhǔn)盒模型有什么區(qū)別? 怎樣使 IE7枕赵、8使用標(biāo)準(zhǔn)盒模型?box-sizing:border-box有什么作用?
IE盒模型:width=內(nèi)容寬度+border寬度+兩側(cè)內(nèi)邊距寬度猜欺;
標(biāo)準(zhǔn)盒模型:width=內(nèi)容寬度;
box-sizing:border-box拷窜,聲明盒子遵從IE盒模型規(guī)則开皿;
7.在 IE 7、8 中展示 盒模型篮昧、inline-block赋荆、max-width的區(qū)別
-
沒寫doctype聲明的情況下:IE7/8中表現(xiàn)一樣,盒模型是IE盒模型懊昨,inline-block都不生效窄潭,max-width不起作用
-
寫了doctype聲明的情況下:盒模型都是按照標(biāo)準(zhǔn)盒模型解析的,inline-block在IE8下有效酵颁,在IE7下依然無效嫉你,max-width都起作用。