摘要:由和開(kāi)發(fā)的瀏覽器排版引擎,年月發(fā)布。瀏覽器的兼容問(wèn)題是我們必須去克服的。表示過(guò)濾器的意思,它是一種對(duì)特定的瀏覽器或?yàn)g覽器組顯示或隱藏規(guī)則或聲明的方法。
?
1)主流瀏覽器 Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游 2)最早的瀏覽器 : Mosaic / Netscape Navigator(網(wǎng)景領(lǐng)航者)(1994-2008)簡(jiǎn)稱(chēng)NN
?Trident (MSHTML) (三叉戟;三叉線;三齒魚(yú)叉)
?Gecko (壁虎)
?Presto ( 迅速的)
?Webkit (Safari內(nèi)核,Chrome內(nèi)核原型,它是蘋(píng)果公司自己的內(nèi)核,也是蘋(píng)果的Safari瀏覽器使用的內(nèi)核)
?Blink (由Google和Opera Software開(kāi)發(fā)的瀏覽器排版引擎)。
*Trident: IE、Maxthon(遨游)、騰訊 、Theworld世界之窗、360瀏覽器 代表作品IE,因?yàn)镮E捆綁在Windows中,所以占有極高的市場(chǎng)份額,又稱(chēng)IE內(nèi)核或是MSHTML,此內(nèi)核只能應(yīng)用于windows平臺(tái),且是不開(kāi)源的。 *Gecko:代表作品Mozilla Firefox 是開(kāi)源的,它的最大優(yōu)勢(shì)是跨平臺(tái),能在Microsoft Windows、Linux和MacOS X等主要操作系統(tǒng)上運(yùn)行。 *Webkit : 代表作品Safari、Chrome , 是一個(gè)開(kāi)源項(xiàng)目。 *Presto : 代表作品Opera ,Presto是由Opera Software開(kāi)發(fā)的瀏覽器排版引擎。它也是世界上公認(rèn)的渲染速度最快的引擎。 *Blink :由Google和Opera Software開(kāi)發(fā)的瀏覽器排版引擎,2013年4月發(fā)布。
由于各大主流瀏覽器由不同的廠家開(kāi)發(fā),所用的核心架構(gòu)和代碼也很難重和,這就為各種莫名其妙的Bug(代碼錯(cuò)誤)提供了溫床。再加上各大廠商出于自身利益考慮而設(shè)置的種種技術(shù)壁壘,都讓CSS應(yīng)用起來(lái)比想象得要麻煩。瀏覽器的兼容問(wèn)題是我們必須去克服的。
1) CSS Bug: CSS樣式在各瀏覽器中解析不一致的情況,或者說(shuō)CSS樣式在瀏覽器中不能正確顯示的問(wèn)題稱(chēng)為CSS bug.
2) CSS Hack: CSS中,Hack是指一種兼容CSS在不同瀏覽器中正確顯示的技巧方法,因?yàn)樗鼈兌紝儆趥€(gè)人對(duì)CSS代碼的非官方的修改,或非官方的補(bǔ)丁。有些人更喜歡使用patch(補(bǔ)丁)來(lái)描述這種行為。
3) Filter: 表示過(guò)濾器的意思,它是一種對(duì)特定的瀏覽器或?yàn)g覽器組顯示或隱藏規(guī)則或聲明的方法。本質(zhì)上講,F(xiàn)ilter是一種用來(lái)過(guò)濾不同瀏覽器的Hack類(lèi)型。
降低了CSS代碼的可讀性,增加了代碼的負(fù)擔(dān)。
*設(shè)計(jì)CSS Hack和 Filter通常有兩種方法:
1)一種是利用瀏覽器自身的Bug,來(lái)隱藏或顯示樣式或聲明;
2)另一種是利用瀏覽器對(duì)CSS支持的不完善,如對(duì)某些規(guī)則或語(yǔ)法還沒(méi)有形成支持,來(lái)隱藏或顯示樣式。
1)圖片有邊框BUG
當(dāng)圖片加在IE上會(huì)出現(xiàn)邊框
Hack:給圖片加border:0;或者border:0 none;
2)圖片間隙
div中的圖片間隙BUG
描述:在div中插入圖片時(shí),圖片會(huì)將div下方撐大大約三像素。
hack1:將與寫(xiě)在一行上;
hack2:將轉(zhuǎn)為塊狀元素,給添加聲明:display:block;
dt,li中圖片間隙
hack: 將轉(zhuǎn)為塊狀元素,給添加聲明:display:block;
3) 雙倍浮向(雙倍邊距)(只有IE6出現(xiàn))
描述:當(dāng)Ie6及更低版本瀏覽器在解析浮動(dòng)元素時(shí),會(huì)錯(cuò)誤地把浮向邊邊界(margin)加倍顯示。
hack:給浮動(dòng)元素添加聲明:display:inline;
4)默認(rèn)高度(IE6、IE7)
描述:在IE6及以下版本中,部分塊元素?fù)碛心J(rèn)高度(在16px左右;)
hack1:給元素添加聲明:font-size:0;
hack2:給元素添加聲明:overflow:hidden;
5)表單元素行高對(duì)齊不一致
描述:表單元素行高對(duì)齊方式不一致
hack:給表單元素添加聲明:float:left;
6)按鈕元素默認(rèn)大小不一
描述:各瀏覽器中按鈕元素大小不一致
hack1: 統(tǒng)一大小/(用a標(biāo)記模擬)
hack2:input外邊套一個(gè)標(biāo)簽,在這個(gè)標(biāo)簽里寫(xiě)按鈕的樣式,把input的邊框去掉。
hack3:如果這個(gè)按鈕是一個(gè)圖片,直接把圖片作為按鈕的背景圖即可。
7)百分比bug
描述:在IE6及以下版本中在解析百分比時(shí),會(huì)按四舍五入方式計(jì)算從而導(dǎo)致50%加50%大于100%的情況。
(也會(huì)受系統(tǒng)影響)
hack: 給右面的浮動(dòng)元素添加聲明:
clear:right; 意思:清除右浮動(dòng)。
clear:left:清除左浮動(dòng)
clear:both:清除兩邊的浮動(dòng)
8)鼠標(biāo)指針bug
描述:cursor屬性的hand屬性值只有IE9以下瀏覽器識(shí)別,其它瀏覽器不識(shí)別該聲明,cursor屬性的pointer屬性值IE6.0以上版本及其它內(nèi)核瀏覽器都識(shí)別該聲明。
hack: 如統(tǒng)一某元素鼠標(biāo)指針形狀為手型,
應(yīng)添加聲明:cursor:pointer
9)透明屬性
兼容其他瀏覽器寫(xiě)法:opacity:value;(value的取值范圍0-1;
例:opacity:0.5;
)
IE瀏覽器寫(xiě)法:filter:alpha(opacity=value);取值范圍 1-100(整數(shù))
10)li列表的BUG
1):當(dāng)父元素(li) 有float:left;子元素(a) 沒(méi)設(shè)置浮動(dòng)的情況下會(huì)出現(xiàn)垂直bug;
Hack:給父元素li和子元素a都設(shè)置浮動(dòng);
2):當(dāng)給li中的a轉(zhuǎn)成block;并且有height,并有float的,li中沒(méi)設(shè)置浮動(dòng)會(huì)出現(xiàn)階梯顯示,
hack:同時(shí)給li加float;
11)margin上下重疊
當(dāng)前元素(父元素里面第一個(gè)子元素)與父元素沒(méi)有設(shè)置任何浮動(dòng)的情況下,設(shè)置margin-top后,會(huì)錯(cuò)誤的把margin-top加在父級(jí)元素上,
Css hack:1、給父級(jí)元素添加overflow:hidden;(推薦使用)
2、給父元素或者子元素加浮動(dòng)
12)margin BUG
當(dāng)兩個(gè)上下排列的元素,上元素有margin-bottom:30px;下面元素有margin-top:20px;他們中間的距離不會(huì)疊加,而是會(huì)設(shè)置為較大的值;
cursor:
;
auto默認(rèn)
crosshair加號(hào)
text文本
wait等待
help幫助
progress過(guò)程
inherit繼承
move移動(dòng)
ne-resize向上或向右移動(dòng)
pointer手形
?
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/2033.html
摘要:最近開(kāi)始看源碼,并將源碼解讀放在了我的計(jì)劃中。像和使用內(nèi)置構(gòu)造函數(shù)所創(chuàng)建的對(duì)象都會(huì)繼承自和的不可枚舉屬性,例如的方法或者的方法。循環(huán)將迭代對(duì)象的所有可枚舉屬性和從它的構(gòu)造函數(shù)的繼承而來(lái)的包括被覆蓋的內(nèi)建屬性。 Why underscore 最近開(kāi)始看 underscore.js 源碼,并將 underscore.js 源碼解讀 放在了我的 2016 計(jì)劃中。 閱讀一些著名框架類(lèi)庫(kù)的源碼...
.markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidden;color:#333}.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body...
摘要:一嚴(yán)格模式與混雜模式如何觸發(fā)這兩種模式,區(qū)分它們有何意義聲明位于文檔中的最前面的位置,處于標(biāo)簽之前。包含過(guò)渡和的也導(dǎo)致頁(yè)面以標(biāo)準(zhǔn)模式呈現(xiàn),但是有過(guò)渡而沒(méi)有會(huì)導(dǎo)致頁(yè)面以混雜模式呈現(xiàn)。不存在或形式不正確會(huì)導(dǎo)致和文檔以混雜模式呈現(xiàn)。 一:HTML+css 1.Doctype? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式,區(qū)分它們有何意義? Doctype聲明位于文檔中的最前面的位置,處于標(biāo)簽...
摘要:一嚴(yán)格模式與混雜模式如何觸發(fā)這兩種模式,區(qū)分它們有何意義聲明位于文檔中的最前面的位置,處于標(biāo)簽之前。包含過(guò)渡和的也導(dǎo)致頁(yè)面以標(biāo)準(zhǔn)模式呈現(xiàn),但是有過(guò)渡而沒(méi)有會(huì)導(dǎo)致頁(yè)面以混雜模式呈現(xiàn)。不存在或形式不正確會(huì)導(dǎo)致和文檔以混雜模式呈現(xiàn)。 一:HTML+css 1.Doctype? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式,區(qū)分它們有何意義? Doctype聲明位于文檔中的最前面的位置,處于標(biāo)簽...
摘要:一嚴(yán)格模式與混雜模式如何觸發(fā)這兩種模式,區(qū)分它們有何意義聲明位于文檔中的最前面的位置,處于標(biāo)簽之前。包含過(guò)渡和的也導(dǎo)致頁(yè)面以標(biāo)準(zhǔn)模式呈現(xiàn),但是有過(guò)渡而沒(méi)有會(huì)導(dǎo)致頁(yè)面以混雜模式呈現(xiàn)。不存在或形式不正確會(huì)導(dǎo)致和文檔以混雜模式呈現(xiàn)。 一:HTML+css 1.Doctype? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式,區(qū)分它們有何意義? Doctype聲明位于文檔中的最前面的位置,處于標(biāo)簽...
閱讀 2760·2021-10-09 09:44
閱讀 3562·2019-08-30 15:54
閱讀 2172·2019-08-30 14:16
閱讀 2803·2019-08-30 13:09
閱讀 836·2019-08-30 13:08
閱讀 1296·2019-08-29 16:29
閱讀 1683·2019-08-26 13:57
閱讀 1941·2019-08-26 13:53