整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
了兼容IE各個(gè)版本，需要在CSS中添加額外的代碼，比如以前常用的_width。之所以工作，是因?yàn)闉g覽器會(huì)忽略不能解析的樣式規(guī)則，因此舉個(gè)例子來說，把_width寫在width下面，對(duì)于非IE瀏覽器會(huì)解析到width，而對(duì)于IE6來說，會(huì)用_width覆蓋前面的width規(guī)則，從而達(dá)到針對(duì)IE6瀏覽器的兼容。對(duì)于IE其他版本(6~11)，也存在同樣的兼容性處理方法。
下面是一個(gè)速查表：
div {
property:value>property:value\0; /* ie 8/9*/<; /* ie 8/9*/
property:value>property:value\9\0; /* ie 9*/<; /* ie 9*/
*property:value; /* ie 7*/
_property:value; /* ie 6*/
}
IE 6
* html .ie6 {property:value;}
or
.ie6 { _property:value;}
IE 7
*+html .ie7 {property:value;}
or
*:first-child+html .ie7 {property:value;}
IE 6 and 7
@media screen {
.ie67 {property:value;}}
or
.ie67 { *property:value;}
or
.ie67 { #property:value;}
IE 6, 7 and 8
@media >@media \0screen\,screen\9 {
.ie678 {property:value;}}
IE 8
html>/**/body .ie8 {property:value;}
or
@media >@media \0screen {
.ie8 {property:value;}}
IE 8 Standards Mode Only
.ie8 { property /*\**/: value }
IE 8,9 and 10
@media screen>@media screen\0 {< {
.ie8910 {property:value;}}
IE 9 only
@media screen and (min-width:0>@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {<) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{property:value;}}
IE 9 and above
@media screen and (min-width:0>@media screen and (min-width:0\0) and (min-resolution: +72dpi) {<) and (min-resolution: +72dpi) {
// IE9+ CSS
.ie9up{property:value;}}
IE 9 and 10
@media screen and (min-width:0>@media screen and (min-width:0\0) {<) {
.ie910{property:value;} /* backslash-9 removes ie11+ & old Safari 4 */}
IE 10 only
_:-ms-lang(x), .ie10 { property:value; }
IE 10 and above
_:-ms-lang(x), .ie10up { property:value; }
or
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.ie10up{property:value;}}
IE 11 (and above..)
_:-ms-fullscreen, :root .ie11up { property:value; }
瀏覽器
瀏覽器大戰(zhàn)
第一次瀏覽器大戰(zhàn)發(fā)生在上個(gè)世紀(jì)90年代，微軟發(fā)布了它的IE瀏覽器，和網(wǎng)景公司的Netscape Navigator瀏覽器大打出手。
第二次瀏覽器大戰(zhàn)發(fā)生在20世紀(jì)。
戰(zhàn)爭產(chǎn)物：Internet Explorer 9
13年市場比重
14年市場比重
15年市場比重
17年市場比重
19年市場比重
Trident 代表作：IE
元老級(jí)內(nèi)核之一，由微軟開發(fā)，并于1997年10月首次在ie 4.0中使用，憑借其windows壟斷優(yōu)勢，Trident市場占有率一直很高。然而壟斷并非，沒有競爭就沒有進(jìn)步，長期以往，Trident內(nèi)核一度停滯不前，更新緩慢，甚至一度與W3C標(biāo)準(zhǔn)脫節(jié)。2011年，從ie 9開始，Trident開始支持HTML5和CSS 3，因此我們也經(jīng)常會(huì)看到有些網(wǎng)站在瀏覽時(shí)會(huì)提示用戶（在Internet Explorer 9.0+以上瀏覽效果最佳）。前端程序員做瀏覽器兼容一般也不再會(huì)考慮ie 8之前的瀏覽器了。
Gecko 代表作：Mozilla
元老級(jí)內(nèi)核之一，由Netscape公司Mozilla組織開發(fā)。1998年，Netscape在于IE瀏覽器競爭失利之后，成立了非正式組織Mozilla，由其開發(fā)新一代內(nèi)核，后命名為“Gecko”。FireFox也是這班人開發(fā)出來了，因此這也就是Mozilla一直使用的內(nèi)核。
Gecko的特點(diǎn)是代碼完全公開，因此其開發(fā)程度很高，全世界的程序員都可以為其編寫代碼，增加功能。
WebKit : 蘋果 & 谷歌舊版本
這是蘋果公司開發(fā)的內(nèi)核，也是其旗下產(chǎn)品Ssfari瀏覽器使用的內(nèi)核。Webkit引擎包含了WebCode排版引擎和JavaScriptCode解析引擎，分別是從KDE的KHTML和KJS衍生而來，它們都是自由軟件，在GPL條約下授權(quán)，同時(shí)支持BSD系統(tǒng)開發(fā)。Chrome、360極速瀏覽器以及搜狗高速瀏覽器也使用Webkit作為內(nèi)核（在腳本理解方面，Chorome使用自己研發(fā)的V8引擎）。
Blink : 代表作：谷歌 & 歐鵬
這是由Google和Opera Software開發(fā)的瀏覽器排版引擎，Google計(jì)算將這個(gè)渲染引擎作為Chromium計(jì)劃的一部分，并且在2013年4月公布了這一消息。這一渲染引擎是開源引擎Webkit中WebCore組件的一個(gè)分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex瀏覽器中使用
Presto ( Opera前內(nèi)核 已經(jīng)廢棄 )
為什么會(huì)出現(xiàn)瀏覽器兼容問題？
由于各大主流瀏覽器由不同的廠家開發(fā)，所用的核心架構(gòu)和代碼也很難重和，這就為各種莫名其妙的Bug(代碼錯(cuò)誤）提供了溫床。再加上各大廠商出于自身利益考慮而設(shè)置的種種技術(shù)壁壘，都讓CSS應(yīng)用起來比想象得要麻煩。瀏覽器的兼容問題是我們必須去克服的。
CSS Bug、CSS Hack和Filter
CSS Bug: CSS樣式在各瀏覽器中解析不一致的情況，或者說CSS樣式在瀏覽器中不能正確顯示的問題稱為CSS bug.
CSS Hack: CSS中，Hack是指一種兼容CSS在不同瀏覽器中正確顯示的技巧方法，因?yàn)樗鼈兌紝儆趥€(gè)人對(duì)CSS代碼的非官方的修改，或非官方的補(bǔ)丁。有些人更喜歡使用patch(補(bǔ)丁)來描述這種行為。
Filter:表示過濾器的意思，它是一種對(duì)特定的瀏覽器或?yàn)g覽器組顯示或隱藏規(guī)則或聲明的方法。本質(zhì)上講，F(xiàn)ilter是一種用來過濾不同瀏覽器的Hack類型。
IE低版本常見CSS解析Bug及hack
1)、圖片有邊框BUG
當(dāng)圖片加在IE上會(huì)出現(xiàn)邊框
Hack:給圖片加border:0;或者border:0 none;
2)、圖片間隙
div中的圖片間隙BUG
描述：在div中插入圖片時(shí)，圖片會(huì)將div下方撐大大約三像素。
hack1:將與寫在一行上；
hack2:將轉(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;
非IE BUG
5)、表單元素對(duì)齊不一致
描述：表單元素行高對(duì)齊方式不一致
hack:給表單元素添加聲明：float:left;
6)、按鈕元素默認(rèn)大小不一
描述：各瀏覽器中按鈕元素大小不一致
hack1：統(tǒng)一大小/（用a標(biāo)記模擬）
hack2:input外邊套一個(gè)標(biāo)簽，在這個(gè)標(biāo)簽里寫按鈕的樣式，把input的邊框去掉。
hack3:如果這個(gè)按鈕是一個(gè)圖片，直接把圖片作為按鈕的背景圖即可。
7)、鼠標(biāo)指針bug
描述：cursor屬性的hand屬性值只有IE9以下瀏覽器識(shí)別，其它瀏覽器不識(shí)別該聲明，cursor屬性的pointer屬性值IE6.0以上版本及其它內(nèi)核瀏覽器都識(shí)別該聲明。
hack: 如統(tǒng)一某元素鼠標(biāo)指針形狀為手型， 應(yīng)添加聲明：cursor:pointer cursor: ;
auto默認(rèn)
crosshair加號(hào)
text文本
wait等待
help幫助
progress過程
inherit繼承
move移動(dòng)
ne-resize向上或向右移動(dòng)
pointer手形
8)、透明屬性
兼容其他瀏覽器寫法：opacity:value;(value的取值范圍0-1;
例：opacity:0.5;)
IE瀏覽器寫法：filter:alpha(opacity=value);取值范圍 1-100(整數(shù))
過濾器
1.下劃線屬性過濾器 當(dāng)在一個(gè)屬性前面增加了一個(gè)下劃線后，由于符合標(biāo)準(zhǔn)的瀏覽器不能識(shí)別帶有下劃線的屬性而忽略了這個(gè)聲明，但是在IE6及更低版本瀏覽器中會(huì)繼續(xù)解析這個(gè)規(guī)則。
語法：選擇符{_屬性：屬性值；}
2.!important關(guān)鍵字過濾器
它表示所附加的聲明具有最高優(yōu)先級(jí)的意思。但由于IE6及更低版本不能識(shí)別它， 我們可以利用IE6的這個(gè)Bug作為過濾器來兼容ＩＥ６和其它標(biāo)準(zhǔn)瀏覽器。
語法：選擇符{屬性：屬性值!important;}
3.*屬性過濾器
當(dāng)在一個(gè)屬性前面增加了*后，該屬性只能被IE7瀏覽器識(shí)別，其它瀏覽器混略該屬 性的作用。
語法：選擇符{*屬性：屬性值；}
4. ：IE版本識(shí)別；其它瀏覽器都不識(shí) 語法：選擇符{屬性：屬性值;}
5.>5.\0 : IE8 及以上版本識(shí)別；其它瀏覽器都不識(shí)別< : IE8 及以上版本識(shí)別；其它瀏覽器都不識(shí)別
- End -
么是css hack
由于不同的瀏覽器，甚至同一瀏覽器的不同版本對(duì)CSS的解析認(rèn)識(shí)不一樣，導(dǎo)致生成的頁面效果不一致，寫出針對(duì)不同瀏覽器CSS code就稱為CSS hack（針對(duì)不同的瀏覽器寫不同的css code的過程即css hack，也叫寫css hack）
css hack可翻譯為：瀏覽器兼容性、兼容方案、簡略兼容瀏覽器。
常用的CSS hack 有三種方式：
CSS 內(nèi)部hack、選擇器hack、HTML 頭部引用，其中第一種最常用。
CSS hack原理
1.利用瀏覽器自身的bug來實(shí)現(xiàn)特定瀏覽器的樣式；
2.利用瀏覽器對(duì)CSS的完善度來實(shí)現(xiàn)，例如某些CSS規(guī)則或語法的支持程度，原理類似目前我們經(jīng)常使用的 -wekit-之類的屬性。
1.CSS 內(nèi)部hack
在CSS3中常見一些這樣的寫法：
/*Mozilla內(nèi)核瀏覽器：firefox3.5+*/
-moz-transform: rotate | scale | skew | translate ;
/*Webkit內(nèi)核瀏覽器：Safari and Chrome*/
-webkit-transform: rotate | scale | skew | translate ;
/*Opera*/
-o-transform: rotate | scale | skew | translate ;
/*IE9*/
-ms-transform: rotate | scale | skew | translate ;
/*W3C標(biāo)準(zhǔn)*/
transform: rotate | scale | skew | translate ;
CSS3目前標(biāo)準(zhǔn)還沒有統(tǒng)一，各個(gè)瀏覽器都有自己的表現(xiàn)方式，甚至有的實(shí)現(xiàn)，有的未實(shí)現(xiàn)，在前面加一些前綴以表示支持某個(gè)
特定瀏覽器，這也是CSS 內(nèi)部hack的基本原理，但真正的CSS hack 遠(yuǎn)遠(yuǎn)不止于此，因?yàn)槿杂蠭E6及其各種奇葩的版本。
語法：
selector{property:value;}
上面代碼所示的是在屬性名稱之前的hack；
當(dāng)然還有以下的寫法：
*background-color:green;
屬性前面加個(gè)“*”這樣的寫法只會(huì)對(duì)IE6、7生效，其它版本IE及現(xiàn)代瀏覽器會(huì)忽略這條指令（沒有特殊說明，本文所有hack都是指
在聲明了DOCTYPE的文檔的效果）
-background-color:green;
屬性前面有個(gè)“-”這樣的只有IE6識(shí)別，還有些在后面的hack
background-color:green!important;
這樣在屬性值后面添加“!important”的寫法只有IE6不能識(shí)別，其它版本IE及現(xiàn)代瀏覽器都可以識(shí)別，還有“+”、“>這樣在屬性值后面添加“!important”的寫法只有IE6不能識(shí)別，其它版本IE及現(xiàn)代瀏覽器都可以識(shí)別，還有“+”、“\0”、”\9” 等。<”、”” 等。
如果只想在IE訪問的時(shí)候加綠色背景，就可以這么寫
background-color:green;
2.選擇器hack
選擇器hanck主要是針對(duì)IE瀏覽器，不怎么常用
語法： selector{ sRules }
針對(duì)IE9的hack可以這么寫：
:root .test{
background-color:green;
}
3.HTML頭部引用
HTML頭部引用就比較特殊了，類似于程序語句，只能使用在HTML文件里，而不能在CSS文件中使用，并且只有在IE瀏覽器下才能執(zhí)行，這個(gè)代碼在非IE瀏覽下不是執(zhí)行該條件下的定義，而是當(dāng)做注釋視而不見。
?
1
<!--– 默認(rèn)先調(diào)用css.css樣式表 –-->
注意：以開頭，以結(jié)尾。
解釋：
lte：就是Less than or equal to的簡寫，也就是小于或等于的意思。
lt ：就是Less than的簡寫，也就是小于的意思。
gte：就是Greater than or equal to的簡寫，也就是大于或等于的意思。
gt ：就是Greater than的簡寫，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判斷符相同。
書寫順序：先一般，再特殊！！
例：
_background-color:red;
background-color:green;
在IE6解析的時(shí)候，第一句能夠識(shí)別，背景設(shè)為紅色，但是第二句所有瀏覽器都識(shí)別，IE6也不例外，背景顏色又被設(shè)為綠色，
所以得反過來寫
background-color:green;
_background-color:red;
所以：先一般，再特殊?。?/p>
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
