兼容性/css hack/normalize.css

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都起作用。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末躏惋,一起剝皮案震驚了整個濱河市幽污,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌簿姨,老刑警劉巖距误,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異款熬,居然都是意外死亡深寥,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門贤牛,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人则酝,你說我怎么就攤上這事殉簸∪蚣” “怎么了?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵般卑,是天一觀的道長武鲁。 經(jīng)常有香客問我蝠检,道長沐鼠,這世上最難降的妖魔是什么叹谁? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮焰檩,結(jié)果婚禮上憔涉,老公的妹妹穿的比我還像新娘。我一直安慰自己析苫,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布国旷。 她就那樣靜靜地躺著,像睡著了一般茫死。 火紅的嫁衣襯著肌膚如雪议街。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天璧榄,我揣著相機與錄音特漩,去河邊找鬼骨杂。 笑死,一個胖子當(dāng)著我的面吹牛搓蚪,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播妒潭,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼雳灾,長吁一口氣:“原來是場噩夢啊……” “哼漠酿!你這毒婦竟也來了谎亩?” 一聲冷哼從身側(cè)響起宇姚,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤夫凸,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后夭拌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡蒜绽,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年献烦,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片巩那。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖噪生,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情东囚,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布桨嫁,位于F島的核電站份帐,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏废境。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一巴元、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧逮刨,春花似錦、人聲如沸禀忆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽佳谦。三九已至,卻和暖如春钻蔑,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背咪笑。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工窗怒, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留映跟,地道東北人扬虚。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像荸镊,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子躬存,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

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