瀏覽器標(biāo)準(zhǔn)模式和怪異模式的區(qū)別

??從IE6開始监婶,引入了Standards模式,標(biāo)準(zhǔn)模式中,瀏覽器嘗試給符合標(biāo)準(zhǔn)的文檔在規(guī)范上的正確處理達(dá)到在指定瀏覽器中的程度惑惶。

??在IE6之前CSS還不夠成熟煮盼,所以IE5等之前的瀏覽器對CSS的支持很差, IE6將對CSS提供更好的支持带污,然而這時的問題就來了僵控,因為有很多頁面是基于舊的布局方式寫的,而如果IE6 支持CSS則將令這些頁面顯示不正常鱼冀,如何在即保證不破壞現(xiàn)有頁面报破,又提供新的渲染機(jī)制呢?

??在寫程序時我們也會經(jīng)常遇到這樣的問題千绪,如何保證原來的接口不變充易,又提供更強(qiáng)大的功能,尤其是新功能不兼容舊功能時荸型。遇到這種問題時的一個常見做法是增加參數(shù)和分支盹靴,即當(dāng)某個參數(shù)為真時,我們就使用新功能瑞妇,而如果這個參數(shù) 不為真時稿静,就使用舊功能,這樣就能不破壞原有的程序辕狰,又提供新功能改备。IE6也是類似這樣做的,它將DTD(文檔類型定義)當(dāng)成了這個“參數(shù)”蔓倍,因為以前的頁面大家都不會去寫DTD悬钳,所以IE6就假定

??DTD是為英文*Document Type Definition,中文意思為“文檔類定義”柬脸。

??如果寫了DTD他去,就意味著這個頁面將采用對CSS支持更好的布局,而如果沒有倒堕,則采用兼容之前的布局方式灾测。這就是Quirks模式(怪癖模式,詭異模式垦巴,怪異模式)媳搪。

?

他們的區(qū)別:

  1. 在嚴(yán)格模式中 :給元素設(shè)置的 寬度 = content;在怪癖模式中 :給元素設(shè)置的 寬度 = content+padding+border

  2. 可以設(shè)置行內(nèi)元素的高寬

    • 在Standards模式下,給span等行內(nèi)元素設(shè)置wdith和height都不會生效
    • 在quirks模式下骤宣,則會生效秦爆。
  3. 可設(shè)置百分比的高度

    • 在standards模式下,一個元素的高度是由其包含的內(nèi)容來決定的憔披,如果父元素沒有設(shè)置高度等限,子元素設(shè)置一個百分比的高度是無效的
  4. 用margin:0 auto設(shè)置水平居中在IE下會失效

    • 使用margin:0 auto在standards模式下可以使元素水平居中
    • 但在quirks模式下卻會失效;
    • quirk模式下的解決辦法爸吮,用text-align屬性:
      body{text-align:center};#content{text-align:left}
  5. quirk模式下設(shè)置圖片的padding會失效

  6. quirk模式下Table中的字體屬性不能繼承上層的設(shè)置

  7. quirk模式下white-space:pre會失效

?
?
?

(1 )盒模型:

在怪異模式下,盒模型為IE盒模型望门,

image.png

而在W3C標(biāo)準(zhǔn)的盒模型中為

image.png

(2)圖片元素的垂直對齊方式:

對于inline元素和table-cell元素形娇,標(biāo)準(zhǔn)模式下vertical-align屬性默認(rèn)取值為baseline,在怪異模式下筹误,table單元格中的圖片的vertical-align屬性默認(rèn)取值為bottom桐早,因此在圖片底部會有及像素的空間。

(3)<table>元素中的字體:

CSS中厨剪,對于font的屬性都是可以繼承的哄酝,怪異模式下,對于table元素祷膳,字體的某些元素將不會從body等其他封裝元素中繼承得到陶衅,特別是font-size屬性。

(4)內(nèi)聯(lián)元素的尺寸:

標(biāo)準(zhǔn)模式下直晨,non-replaced inline元素?zé)o法自定義大小万哪,怪異模式下,定義這些元素的width抡秆,height屬性可以影響這些元素顯示的尺寸。

(5)元素的百分比高度:

a:CSS中對于元素的百分比高度規(guī)定如下:百分比為元素包含塊的高度吟策,不可為負(fù)值儒士,如果包含塊的高度沒有顯示給出,該值等同于auto檩坚,所以百分比的高度必須在父元素有高度聲明的情況下使用着撩。

b:當(dāng)一個元素使用百分比高度時,標(biāo)準(zhǔn)模式下匾委,高度取決于內(nèi)容變化拖叙,怪異模式下,百分比高度被正確應(yīng)用赂乐。

(6)元素溢出的處理:

標(biāo)準(zhǔn)模式下薯鳍,overflow取默認(rèn)值visible,在怪異模式下挨措,該溢出會被當(dāng)做擴(kuò)展box來對待挖滤,即元素的大小由其內(nèi)容決定,溢出不會裁減浅役,元素框自動調(diào)整斩松,包含溢出內(nèi)容。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末觉既,一起剝皮案震驚了整個濱河市惧盹,隨后出現(xiàn)的幾起案子乳幸,更是在濱河造成了極大的恐慌,老刑警劉巖钧椰,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件粹断,死亡現(xiàn)場離奇詭異,居然都是意外死亡演侯,警方通過查閱死者的電腦和手機(jī)姿染,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來秒际,“玉大人悬赏,你說我怎么就攤上這事÷玻” “怎么了闽颇?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長寄锐。 經(jīng)常有香客問我兵多,道長,這世上最難降的妖魔是什么橄仆? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任剩膘,我火速辦了婚禮,結(jié)果婚禮上盆顾,老公的妹妹穿的比我還像新娘怠褐。我一直安慰自己,他們只是感情好您宪,可當(dāng)我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布奈懒。 她就那樣靜靜地躺著,像睡著了一般宪巨。 火紅的嫁衣襯著肌膚如雪磷杏。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天捏卓,我揣著相機(jī)與錄音极祸,去河邊找鬼。 笑死怠晴,一個胖子當(dāng)著我的面吹牛贿肩,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播龄寞,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼汰规,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了物邑?” 一聲冷哼從身側(cè)響起溜哮,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤滔金,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后茂嗓,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體餐茵,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年述吸,在試婚紗的時候發(fā)現(xiàn)自己被綠了忿族。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡蝌矛,死狀恐怖道批,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情入撒,我是刑警寧澤隆豹,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站茅逮,受9級特大地震影響璃赡,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜献雅,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一碉考、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧挺身,春花似錦豆励、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽技扼。三九已至伍玖,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間剿吻,已是汗流浹背窍箍。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留丽旅,地道東北人椰棘。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像榄笙,于是被迫代替她去往敵國和親邪狞。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,592評論 2 353

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案茅撞? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,748評論 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5帆卓? 答:HTML5是最新的HTML標(biāo)準(zhǔn)巨朦。 注意:講述HT...
    kismetajun閱讀 27,474評論 1 45
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測試過剑令?這些瀏覽器的內(nèi)核分別是什么? ...
    Simon_s閱讀 2,220評論 0 8
  • CSS Q: HTML引入CSS的方式有哪些糊啡? A: HTML element的style屬性,HTML內(nèi)部sty...
    趙長安啊閱讀 598評論 0 7
  • 敬畏—進(jìn)入——交給—持續(xù) 1,缺啥補(bǔ)啥,怕啥練啥碍脏; 2,一切為我所用梭依,所用為團(tuán)隊家; 3潮酒,我想變睛挚,我要變,我不得不...
    ATurbo閱讀 143評論 0 0