成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

CoyPan / 2328人閱讀

摘要：從開(kāi)始，引入了模式，標(biāo)準(zhǔn)模式中，瀏覽器嘗試給符合標(biāo)準(zhǔn)的文檔在規(guī)范上的正確處理達(dá)到在指定瀏覽器中的程度。這就是模式怪癖模式，詭異模式，怪異模式。

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

??在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對(duì)CSS的支持很差， IE6將對(duì)CSS提供更好的支持，然而這時(shí)的問(wèn)題就來(lái)了，因?yàn)橛泻芏囗?yè)面是基于舊的布局方式寫的，而如果IE6 支持CSS則將令這些頁(yè)面顯示不正常，如何在即保證不破壞現(xiàn)有頁(yè)面，又提供新的渲染機(jī)制呢？

??在寫程序時(shí)我們也會(huì)經(jīng)常遇到這樣的問(wèn)題，如何保證原來(lái)的接口不變，又提供更強(qiáng)大的功能，尤其是新功能不兼容舊功能時(shí)。遇到這種問(wèn)題時(shí)的一個(gè)常見(jiàn)做法是增加參數(shù)和分支，即當(dāng)某個(gè)參數(shù)為真時(shí)，我們就使用新功能，而如果這個(gè)參數(shù) 不為真時(shí)，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD（文檔類型定義）當(dāng)成了這個(gè)“參數(shù)”，因?yàn)橐郧暗捻?yè)面大家都不會(huì)去寫DTD，所以IE6就假定

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

??如果寫了DTD，就意味著這個(gè)頁(yè)面將采用對(duì)CSS支持更好的布局，而如果沒(méi)有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

?

他們的區(qū)別：

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

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

在Standards模式下，給span等行內(nèi)元素設(shè)置wdith和height都不會(huì)生效

在quirks模式下，則會(huì)生效。

可設(shè)置百分比的高度

在standards模式下，一個(gè)元素的高度是由其包含的內(nèi)容來(lái)決定的，如果父元素沒(méi)有設(shè)置高度，子元素設(shè)置一個(gè)百分比的高度是無(wú)效的

用margin:0 auto設(shè)置水平居中在IE下會(huì)失效

使用margin:0 auto在standards模式下可以使元素水平居中

但在quirks模式下卻會(huì)失效;

quirk模式下的解決辦法，用text-align屬性:

body{text-align:center};
#content{text-align:left}

quirk模式下設(shè)置圖片的padding會(huì)失效

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

quirk模式下white-space:pre會(huì)失效

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113715.html

相關(guān)文章

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

    摘要：從開(kāi)始，引入了模式，標(biāo)準(zhǔn)模式中，瀏覽器嘗試給符合標(biāo)準(zhǔn)的文檔在規(guī)范上的正確處理達(dá)到在指定瀏覽器中的程度。這就是模式怪癖模式，詭異模式，怪異模式。 ??從IE6開(kāi)始，引入了Standards模式，標(biāo)準(zhǔn)模式中，瀏覽器嘗試給符合標(biāo)準(zhǔn)的文檔在規(guī)范上的正確處理達(dá)到在指定瀏覽器中的程度。 ??在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對(duì)CSS的支持很差， IE6將對(duì)CSS提供更好的支持，...

    Moxmi 評(píng)論0 收藏0

  • 《50道CSS基礎(chǔ)面試題（附答案）》中的答案真的就只是答案嗎？

    摘要：背景想想自己為什么要寫這個(gè)，難道不是因?yàn)檫@篇道基礎(chǔ)面試題附答案文章最近被轉(zhuǎn)載的多，比較多而湊熱鬧蹭熱點(diǎn)顯然，肯定是因?yàn)檫@樣我才打算寫的。繼承得到的樣式的優(yōu)先級(jí)最低。 背景 想想自己為什么要寫這個(gè)，難道不是因?yàn)檫@篇《50道CSS基礎(chǔ)面試題（附答案）》文章最近被轉(zhuǎn)載的多，比較多而湊熱鬧蹭熱點(diǎn)？顯然，肯定是因?yàn)檫@樣我才打算寫的。而且還有就是，我的公眾號(hào)也很久沒(méi)有更新了，微信說(shuō)長(zhǎng)期不更新會(huì)關(guān)掉...

    DataPipeline 評(píng)論0 收藏0

  • 標(biāo)準(zhǔn)盒模型、怪異盒模型對(duì)比與應(yīng)用

    摘要：百度標(biāo)準(zhǔn)盒模型，所有的介紹都是在標(biāo)準(zhǔn)模式下，一個(gè)塊的總寬度左右左右左右在怪異模式下，一個(gè)塊的總寬度左右既已經(jīng)包含了和值然后再介紹一下新屬性那么，到底這兩個(gè)公式里提到的總寬度是什么意思呢兩種模式最終效果有什么差別呢話不多說(shuō)，上代碼先看標(biāo)準(zhǔn) 百度標(biāo)準(zhǔn)盒模型，所有的介紹都是在標(biāo)準(zhǔn)模式下，一個(gè)塊的總寬度=width+margin(左右)+padding(左右)+border(左右)在怪異模式下...

    keithxiaoy 評(píng)論0 收藏0

  • 前端工作面試HTML相關(guān)問(wèn)題

    摘要：前端工作面試相關(guān)問(wèn)題文檔類型的作用是什么在中有兩個(gè)主要目的。而當(dāng)元素的內(nèi)容只有圖片時(shí)，如的單元格。在下，單元格中的圖片的屬性默認(rèn)為，因此，在圖片底部會(huì)有幾像素的空間。所以百分比的高度必須在父元素有聲明高度時(shí)使用。關(guān)閉窗口后，即被銷毀。 前端工作面試HTML相關(guān)問(wèn)題 Q: doctype（文檔類型）的作用是什么？ A: 在HTML中 doctype 有兩個(gè)主要目的。 對(duì)文檔進(jìn)...

    iamyoung001 評(píng)論0 收藏0

  • 前端面試（知識(shí)點(diǎn)）整理（一）

    摘要：接受個(gè)參數(shù)事件類型，是否冒泡，是否阻止瀏覽器的默認(rèn)行為觸發(fā)上綁定的自定義事件觸發(fā)元素上綁定事件事件的委托代理的原理以及優(yōu)缺點(diǎn)。委托代理事件是那些被綁定到父級(jí)元素的事件，但是只有當(dāng)滿足一定匹配條件時(shí)才會(huì)被挪。 一、頁(yè)面布局 1.問(wèn)題：假設(shè)高度已知，請(qǐng)寫出三欄布局 ，其中左欄、右欄寬度各為300px，中間自適應(yīng)。 解決方案一：使用浮動(dòng)布局` Document ...

    zhichangterry 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<