解決瀏覽器兼容性的技巧是什么

本篇內(nèi)容主要講解“解決瀏覽器兼容性的技巧是什么”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“解決瀏覽器兼容性的技巧是什么”吧!

　　一、chrome下會(huì)讓小于12px的文本字體默認(rèn)為12px顯示，讓chrome支持小于12px的字體

　　box{font-size:8px;-webkit-text-size-adjust:none;}

　　但是，上面這個(gè)方法chrome27以后就不能用了。但我們可以用css3解決這個(gè)問(wèn)題

　　box{font-size:12px;-webkit-transform:scale(0.75);}

　　二、不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁和內(nèi)補(bǔ)丁不同，隨便寫(xiě)幾個(gè)標(biāo)簽，不加樣式控制的情況下，各自的margin和padding差異較大，碰到頻率:100%

　　解決方案：

　　*{margin:0;padding:0;}

　　備注：這個(gè)是最常見(jiàn)的也是最易解決的一個(gè)瀏覽器兼容性問(wèn)題，幾乎所有的css文件開(kāi)頭都會(huì)用通配符來(lái)設(shè)置各個(gè)標(biāo)簽的內(nèi)外補(bǔ)丁是0。

　　三、設(shè)置較小高度標(biāo)簽（一般小于10px），在ie6，ie7，遨游中高度超出自己設(shè)置高度

　　問(wèn)題癥狀：ie6、7和遨游里這個(gè)標(biāo)簽的高度不受控制，超出自己設(shè)置的高度

　　碰到頻率：60%

　　解決方案：給超出高度的標(biāo)簽設(shè)置overflow:hidden;或者設(shè)置行高line-height小于你設(shè)置的高度。

　　備注：這種情況一般出現(xiàn)在我們?cè)O(shè)置小圓角背景的標(biāo)簽里。出現(xiàn)這個(gè)問(wèn)題的原因是ie8之前的瀏覽器都會(huì)給標(biāo)簽一個(gè)最小默認(rèn)的行高的高度。即使你的標(biāo)簽是空的，這個(gè)標(biāo)簽的高度還是會(huì)達(dá)到默認(rèn)的行高。

　　四、圖片默認(rèn)有間距

　　問(wèn)題癥狀：幾個(gè)img標(biāo)簽放在一起的時(shí)候，有些瀏覽器會(huì)有默認(rèn)的間距，加上問(wèn)題一中提到的通配符也不起作用。

　　碰到幾率：20%

　　解決方案：使用float屬性為img布局

　　備注：因?yàn)閕mg標(biāo)簽是行內(nèi)屬性標(biāo)簽，所以只要不超出容器寬度，img標(biāo)簽都會(huì)排在一行里，但是部分瀏覽器的img標(biāo)簽之間會(huì)有個(gè)間距。去掉這個(gè)間距使用float是正道

　　五、標(biāo)簽最低高度設(shè)置min-height不兼容

　　問(wèn)題癥狀：因?yàn)閙in-height本身就是一個(gè)不兼容的css屬性，所以設(shè)置min-height時(shí)不能很好的被各個(gè)瀏覽器兼容

　　碰到幾率：5%

　　解決方案：如果我們要設(shè)置一個(gè)標(biāo)簽的最小高度200px，需要進(jìn)行的設(shè)置為：

　　{min-height:200px;height:auto!important;height:200px;overflow:visible;}

　　備注：在B/S系統(tǒng)前端開(kāi)時(shí)，有很多情況下我們有這種需求。當(dāng)內(nèi)容小于一個(gè)值（如300px）時(shí)。容器的高度為300px；當(dāng)內(nèi)容高度大于這個(gè)值時(shí)，容器高度被撐高，而不是出現(xiàn)滾動(dòng)條。這時(shí)候我們就會(huì)面臨這個(gè)兼容性問(wèn)題。

　　六、const問(wèn)題

　　說(shuō)明:Firefox下,可以使用const關(guān)鍵字或var關(guān)鍵字來(lái)定義常量;

　　IE下,只能使用var關(guān)鍵字來(lái)定義常量.

　　解決方法：統(tǒng)一使用var關(guān)鍵字來(lái)定義常量.

　　七.window.location.href問(wèn)題

　　說(shuō)明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href;

　　Firefox1.5.x下,只能使用window.location.

　　解決方法：使用window.location來(lái)代替window.location.href.

　　八、ul和ol列表縮進(jìn)問(wèn)題

　　消除ul、ol等列表的縮進(jìn)時(shí)，樣式應(yīng)寫(xiě)成：

　　list-style:none;margin:0px;padding:0px;

　　經(jīng)驗(yàn)證，在IE中，設(shè)置margin:0px可以去除列表的上下左右縮進(jìn)、空白以及列表編號(hào)或圓點(diǎn)，設(shè)置padding對(duì)樣式?jīng)]有影響；在Firefox中，設(shè)置margin:0px僅僅可以去除上下的空白，設(shè)置padding:0px后僅僅可以去掉左右縮進(jìn)，還必須設(shè)置list-style:none才能去除列表編號(hào)或圓點(diǎn)。也就是說(shuō)，在IE中僅僅設(shè)置margin:0px即可達(dá)到最終效果，而在Firefox中必須同時(shí)設(shè)置margin:0px、padding:0px以及l(fā)ist-style:none三項(xiàng)才能達(dá)到最終效果。

　　九、IE與寬度和高度的問(wèn)題

　　IE不認(rèn)得min-這個(gè)定義，但實(shí)際上它把正常的width和height當(dāng)作有min的情況來(lái)使。這樣問(wèn)題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個(gè)值就不會(huì)變，如果只用min-width和min-height的話，IE下面根本等于沒(méi)有設(shè)置寬度和高度。

　　比如要設(shè)置背景圖片，這個(gè)寬度是比較重要的。要解決這個(gè)問(wèn)題，可以這樣：

　　box{width:80px;height:35px;}html>body#box{width:auto;height:auto;min-width:80px;min-height:35px;}

　　十、頁(yè)面的最小寬度

　　如上一個(gè)問(wèn)題，IE不識(shí)別min，要實(shí)現(xiàn)最小寬度，可用下面的方法：

　　container{min-width:600px;width:expression(document.body.clientWidth＜600?"600px":"auto");}

　　第一個(gè)min-width是正常的；但第2行的width使用了Javascript，這只有IE才認(rèn)得，這也會(huì)讓你的HTML文檔不太正規(guī)。它實(shí)際上通過(guò)Javascript的判斷來(lái)實(shí)現(xiàn)最小寬度。

到此，相信大家對(duì)“解決瀏覽器兼容性的技巧是什么”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！