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