整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
通用網(wǎng)站頭部
（1）使用clear:both清除浮動(dòng)
在代碼中在放一個(gè)空的div標(biāo)簽，然后給這個(gè)標(biāo)簽設(shè)置clear:both來清除浮動(dòng)對(duì)頁面的影響。它的優(yōu)點(diǎn)是簡單，方便兼容性好，但是一般情況下不建議使用該方法，因?yàn)闀?huì)造成結(jié)構(gòu)混亂，不利于后期維護(hù)
<div style="clear: both"></div>
（2）利用偽元素clearfix來清除浮動(dòng)
給父級(jí)元素添加了一個(gè):after偽元素，通過清除偽元素的浮動(dòng)，達(dá)到撐起父元素高度的目的
.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
}
gt;>>通用hack方法篇<<<
最近看到淘寶已經(jīng)放棄IE8了，瞬間樂了，但是轉(zhuǎn)瞬一想，自己還在苦逼的兼容著IE6，頓時(shí)心灰意冷，生無可戀啊！沒有IE就沒有傷害！在此衷心起到IE6/7/8早日被拋棄，還世界一片安寧！
言歸正傳，這次是想把自己整理的一些瀏覽器兼容方案post上來，希望可以幫到一些和我一樣苦逼兼容著IE6的伙伴。
一些通用的hack方法
這邊主要簡單的講述一些瀏覽器的hack方法，至于具體的兼容問題，后面再一一講解。
CSS hack和filter原理
利用瀏覽器自身的bug來實(shí)現(xiàn)特定瀏覽器的樣式
利用瀏覽器對(duì)CSS的完善度來實(shí)現(xiàn)，例如某些CSS規(guī)則或語法的支持程度，原理類似目前我們經(jīng)常使用的 -wekit- 之類的屬性；
IE條件注釋
IE的條件注釋僅僅針對(duì)IE瀏覽器，對(duì)其他瀏覽器無效；例如下面的語法：
<!--[ifIE]>//你想要執(zhí)行的代碼<![endif]--><!--[ifltIE8]>//你想要執(zhí)行的代碼<![endif]--><!--[if!IE8]>//你想要執(zhí)行的代碼<![endif]-->
!important 關(guān)鍵字
!important 在css中是聲明擁有最高優(yōu)先級(jí)，也就是說，不管css的其他優(yōu)先級(jí)，只要!important出現(xiàn)，他的優(yōu)先級(jí)就最高！遨游1.6及更低版本、IE6及更低版本瀏覽器不能識(shí)別它。盡管這個(gè)!important 很實(shí)用，但是非到必要的時(shí)刻，不要使用它！
屬性過濾器（較為常用的hack方法）
針對(duì)不同的IE瀏覽器，可以使用不同的字符來讓特定的版本的IE瀏覽器進(jìn)行樣式控制。
至于一些的關(guān)于屬性選擇器的過濾的方法這邊就不再介紹了，因?yàn)檫@些都沒有必要了，我想不到還有哪些喪心病狂的項(xiàng)目會(huì)要求兼容到IE6以下或者更低的了！
IE hack寫法一覽
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>CSS兼容方案篇<<<
上一篇文章介紹了一些常用hack方法，這次來講一些之前遇到過或者嘗試過的一些CSS兼容問題與解決問題，這些是自己的一些收集整理，肯定不可能大而全，只是一些比較常見的問題，等我整理下，下次來寫篇JS的兼容問題。
另外，如果你是一位幸運(yùn)的朋友（不用兼容低版本IE），那么你也沒有必要看這篇文章了。
a標(biāo)簽CSS順序
很多新人在寫a標(biāo)簽的樣式，會(huì)疑惑為什么寫的樣式?jīng)]有效果，其實(shí)只是寫的樣式被覆蓋了，正確的a標(biāo)簽順序應(yīng)該：
link
visited
hover
active
24位的png圖片
IE6不支持透明咋辦？使用png透明圖片唄，但是需要注意的是24位的PNG圖片在IE6是不支持的，解決方案有兩種：
使用8位的PNG圖片
為IE6準(zhǔn)備一套特殊的圖片
透明度
opacity: 0.8; //通用
filter: alpha(opacity=80); //IE
filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80); //IE6的寫法
如果你不需要兼容IE6，那么你可以甩掉那又臭又長的裹腳布了，反正我是記不住IE6的透明度寫法，別懷疑，剛網(wǎng)上找的.
IE6雙邊距
行內(nèi)屬性設(shè)置了塊級(jí)屬性（display: block;）后，會(huì)產(chǎn)生雙倍邊距。
解決方案是在添加一個(gè) display: inline; 或者 display: table;
雙倍margin
浮動(dòng)元素設(shè)置了margin在IE6下會(huì)產(chǎn)生雙倍margin。
只要給浮動(dòng)元素設(shè)置 display: inline;就可以了。或者說使用IE6的hack：_margin；
min-height的兼容寫法
.divBox{min-height:200px;height:auto!important;height:200px;overflow:visible;}
IE6最小寬度（反正我沒實(shí)踐過？！）
.divBox{min-width:600px;_width:expression(document.body.clientWidth<600?"600px":"auto");}
盒模型差異
IE盒模型：margin 、 content（包含border、padding）
W3C盒模型： margin 、border、 padding、 content
CSS3中的box-sizing的屬性就是為了這兩種模式，border-box（IE盒明星）和content-box（W3C）
img標(biāo)簽-圖片存在邊距
使用 vertical-align 屬性可以清楚這種邊距
順便說下a標(biāo)簽同樣會(huì)存在邊距，具體的解決方法可以看看去除inline-block元素間間距的N種方法;
IE6 高度無法小于10px
添加overflow的屬性
設(shè)置font-size的屬性為高度的大小
雙倍float
.divBox{float:left;width:100px;margin:000100px;//這種情況之下IE會(huì)產(chǎn)生200px的距離display:inline;//使浮動(dòng)忽略}
ul列表邊距屬性不統(tǒng)一
IE下 ul的邊距是使用margin
firefox下ul的邊距是使用padding
重置CSS基本樣式， 統(tǒng)一使用margin或者padding
IE6下select元素顯示bug
select元素在IE6下是以窗口的形式展現(xiàn)的，所以在你需要彈出一個(gè)提示框（modal）的時(shí)候，你會(huì)發(fā)現(xiàn)select在modal的上面，無論你設(shè)置多大z-index都無效。解決的方法也很簡單，利用一個(gè)透明的iframe蓋住select就可以了
<divclass=””wrapper><!--[ifIE6]><iframestyle="position:absolute;top:0;left:0;width:100%;height:100px;z-index:-1;filter:alpha(opacity=0);opacity=0;border-style:none;"></iframe><![endif]-->//TODO;</div>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
js兼容方案篇
js兼容性方案如期而至，雖然現(xiàn)在有了前端框架和各種庫已經(jīng)幫我們解決了各種兼容問題，或是現(xiàn)代瀏覽器已經(jīng)不需要考慮這些繁瑣的兼容性，但是我們還是有必要了解下這些兼容問題,畢竟有些時(shí)候我們還是需要原生JavaScript來實(shí)現(xiàn)我們的功能，或是需要兼容至萬惡的IE6（例如苦逼的我）。
以下的所說的瀏覽器都是特指低版本瀏覽器，畢竟現(xiàn)代瀏覽器已經(jīng)很少有兼容性問題了
document.formName.item()
document.formName.item(”itemName”);//IE支持document.formName.elements["elementName"];//均支持
獲取屬性
根據(jù)很多的人的反饋來看，無論是常規(guī)的獲取自定義屬性，或是jq的attr()在不同的環(huán)境下都是存在著些許兼容性問題，所以為了保險(xiǎn)起見，最好是使用原生的getAttribute()來獲取屬性；
ID
在IE下，我們是可以通過document.idName來獲取元素，但是Firefox是不允許的。
而且Firefox中我們使用與html對(duì)象ID相同的變量名，所以，獲取元素最好使用document.getElementById(”idName”) 代替 document.idName，避免不必要的bug
input.type
IE下不允許修改input的類型，F(xiàn)irefox可以修改。盡量避免修改input的類型。
setattribute
object.setAttribute("class","style");//在IE8、Chrome、火狐、Opera10中都能設(shè)置成功；但是在IE7下無法設(shè)置。object.setAttribute("className","className");//只有IE7能設(shè)置成功，但是其他瀏覽器均無法設(shè)置。
統(tǒng)一使用 object.className=”content”
style與cssText
object.setAttribute("style","width:100px;height:200px");//在IE8、Chrome、火狐、Opera10中都能設(shè)置成功；但是在IE7下無法設(shè)置。object.setAttribute("cssText","width:100px;height:200px");//所有瀏覽器均不支持。object.style.cssText="width:100px;height:200px";//統(tǒng)一使用如上方法
indexof()
IE8以下不兼容indexof()方法, 添加indexof的原型方法即可；
if(!Array.prototype.indexOf){Array.prototype.indexOf=function(elt){varlen=this.length>>>0;varfrom=Number(arguments[1])||0;from=(from<0)?Math.ceil(from):Math.floor(from);if(from<0){from+=len;}for(;from<len;from++){if(frominthis&&this[from]===elt){returnfrom;}}return-1;};}
event.srcElement
IE下，even不存在target屬性
srcObj=event.srcElement?event.srcElement:event.target;
父節(jié)點(diǎn)parentElement
ele.parentElement//firebox不支持ele.parentNode//通用
table使用innerHtml
在IE中使用innerHtml和appendChild無效，解決方法是將內(nèi)容插入到tbody中
varrow=document.createElement("tr");varcell=document.createElement("td");varcell_text=document.createTextNode("插入的內(nèi)容");cell.appendChild(cell_text);row.appendChild(cell);document.getElementsByTagName("tbody")[0].appendChild(row);
移除節(jié)點(diǎn)
removeNode();//firebox不支持removeChild();//通用，取上一層父節(jié)點(diǎn)再移除子節(jié)點(diǎn)
坐標(biāo)
varpage={};page.x=event.x?event.x:event.pageX;page.y=event.y?event.y:event.pageY;//event的x,y在IE中支持，pageX和pageY在Firefox中支持
事件監(jiān)聽
functionaddEvent(elem,eventName,handler){ if(elem.attachEvent){ elem.attachEvent("on"+eventName,function(){ handler.call(elem)}); //此處使用回調(diào)函數(shù)call()，讓this指向elem }elseif(elem.addEventListener){ elem.addEventListener(eventName,handler,false); }}functionremoveEvent(elem,eventName,handler){if(elem.detachEvent){ elem.detachEvent("on"+eventName,function(){ handler.call(elem)}); //此處使用回調(diào)函數(shù)call()，讓this指向elem }elseif(elem.removeEventListener){ elem.removeEventListener(eventName,handler,false); }}//IE提供了attachEvent和detachEvent兩個(gè)接口，而Firefox提供的是addEventListener和removeEventListener。
鍵盤事件 keyCode
functiongetKeyCode(e){//兼容IE和Firefox獲得keyBoardEvent對(duì)象e=e?e:(window.event?window.event:"")//兼容IE和Firefox獲得keyBoardEvent對(duì)象的鍵值returne.keyCode?e.keyCode:e.which;}//IE：e.keyCode//fireFox:e.which
圖1
圖2
圖3
圖4
就愛UI - 分享UI設(shè)計(jì)的點(diǎn)點(diǎn)滴滴
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
