|
以前做網(wǎng)頁(yè)的時(shí)候，只考慮 IE6 和 FF 的兼容性，公司換了，要求也高了，FF和IE 6 7 8 要全兼容了，碰到要單獨Hack IE8的。當然，用注釋非常方便，只要添加相應的注釋就可以解決。但問(wèn)題是，為了一句CSS寫(xiě)多一個(gè)文件，或者在header上添加注釋?zhuān)秋@然不是懶人的習慣做法。結論如下： selector{ property:value; property:value\9; +property:value; _property 當然，注意順序。根據CSS的優(yōu)先性，上面的寫(xiě)法，分別針對Firefox、IE8、IE7和IE6顯示值。讓我們看看這個(gè)： CSS代碼如下： p.ie{ height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;font:15; color:blue; // 所有瀏覽器 color:brown\9; // 所有IE瀏覽器 +color:red; // IE7 _color:green; // IE6 } HTML 代?a： <body style="width:500px;margin:0 auto;"> <p class="ie"> <span style="display:block;display:none。9;">嘿嘿，小子竟然也用Firefox，藍色文字。</span> <!--[if IE 8]>不錯不錯，挺先進(jìn)的嘛，使用IE8呢！文字是褐色的。<![endif]--> <!--[if IE 7]>你，IE7，紅色文字！<![endif]--> <!--[if IE 6]>孩子，雖然顯示的是綠色文字，不過(guò)，IE6可不是好東西呢！<![endif]--> </p> </body> 注意下面介紹的這些hack寫(xiě)法僅適用于XHTML1.0。如果沒(méi)有在HTML最前加上 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> 那么效果將不一樣！此外，這里所說(shuō)的IE8，不是指IE8的兼容模式，因為IE8的兼容模式其實(shí)就是IE7。 區別IE6、7與FF/IE8： background:blue;*background:orange; 引用 顯示效果： IE 6/7：orange FF/IE8:blue 原理：FF/IE8不支持*開(kāi)頭，而IE6/7都支持。 區別IE6與IE7/IE8/FF： background:green;_background:blue; 引用 顯示效果： IE7/8/FF：green IE6:blue 原理：IE6支持下劃線(xiàn)"_"，IE7、8和firefox均不支持下劃線(xiàn)。 區別FF/IE8和IE6/7： background:orange;+background:green;-background:blue; 或者 background:orange;*background:green!important;*background:blue; 引用 顯示效果： IE6：blue IE7：green FF/IE8:orange 原理：IE6能識別-，IE7能識別+，IE8和FF都不能識別+和- IE8/FF都不識別*，IE7優(yōu)先識別!important，IE6不能識別!important。 關(guān)于IE8的hacks： .test{ color:#00f\9; color:#00f\9; } 可同時(shí)區分IE8、IE7、IE6、Firefox的CSS hacks： .test{ color:#000; color:#00f\9; *color:#f00; _color:#0f0; } 添加相應的注釋解決兼容性問(wèn)題 注釋相應的Css文件： <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="css/IE6style.css" media="screen" /> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="css/IE7style.css" media="screen" /> <![endif]--> <!--[if gte IE 8]> <link rel="stylesheet" type="text/css" href="css/IE8style.css" media="screen" /> <![endif]--> 注釋相應的Css 內容： <!--[if ie 6]> <style> <!-- #warp{ padding-bottom:11px;} --> </style> <![endif]--> <!--[if ie 7]> <style> <!-- #warp{ padding-bottom:11px;} --> </style> <![endif]--> <!--[if ie 8]> <style> <!-- #warp{ padding-bottom:11px;} --> </style> <![endif]--> |
嘉興雷鳥(niǎo)是一家集企業(yè)軟件開(kāi)發(fā)，WEB網(wǎng)站建設，移動(dòng)APP制作等綜合型的互聯(lián)網(wǎng)公司，為嘉興顧客提供一站式的企業(yè)軟件開(kāi)發(fā)，安卓app開(kāi)發(fā)，ios開(kāi)發(fā)服務(wù)，同時(shí)為嘉興企業(yè)提供全面移動(dòng)互聯(lián)軟件技術(shù)解決方案，是嘉興知名的綜合型APP軟件外包開(kāi)發(fā)公司。根據前期調研方案和客戶(hù)實(shí)際需求，以專(zhuān)業(yè)獨到的設計理念、精益求精的技術(shù)精神、嚴格完善的品控系統，為嘉興每一位客戶(hù)提供專(zhuān)屬的移動(dòng)互聯(lián)軟件技術(shù)解決方案。經(jīng)過(guò)不斷積累，嘉興雷鳥(niǎo)陸續推出視頻直播APP、電商商城APP、P2P網(wǎng)貸APP、智能硬件APP開(kāi)發(fā)、移動(dòng)APP開(kāi)發(fā)、微信公眾平臺開(kāi)發(fā)、一元購APP、智慧社區服務(wù)APP、生活服務(wù)O2O系統APP等各類(lèi)APP產(chǎn)品，為嘉興各行企業(yè)向移動(dòng)互聯(lián)網(wǎng)轉型奠定了堅實(shí)基礎。在激烈的市場(chǎng)競爭中，嘉興雷鳥(niǎo)創(chuàng )造了嘉興軟件定制開(kāi)發(fā)行業(yè)的卓越口碑，是具有更高品質(zhì)的移動(dòng)互聯(lián)網(wǎng)軟件技術(shù)定制服務(wù)商。
