這篇文章給大家分享的是有關如何解決瀏覽器兼容性問題的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司10多年成都定制網(wǎng)站服務;為您提供網(wǎng)站建設,網(wǎng)站制作,網(wǎng)頁設計及高端網(wǎng)站定制服務,成都定制網(wǎng)站及推廣,對成都柴油發(fā)電機等多個方面擁有豐富的網(wǎng)站運維經(jīng)驗的網(wǎng)站建設公司。

一、chrome下會讓小于12px的文本字體默認為12px顯示，讓chrome支持小于12px的字體

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

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

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

二、不同瀏覽器的標簽默認的外補丁和內(nèi)補丁不同，隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大，碰到頻率:100%

解決方案：

* {margin:0;padding:0;}

備注：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的css文件開頭都會用通配符來設置各個標簽的內(nèi)外補丁是0。

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

問題癥狀：ie6、7和遨游里這個標簽的高度不受控制，超出自己設置的高度

碰到頻率：60%

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

備注：這種情況一般出現(xiàn)在我們設置小圓角背景的標簽里。出現(xiàn)這個問題的原因是ie8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。

四、圖片默認有間距

問題癥狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加上問題一中提到的通配符也不起作用。

碰到幾率：20%

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

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

五、標簽最低高度設置min-height不兼容

問題癥狀：因為min-height本身就是一個不兼容的css屬性，所以設置min-height時不能很好的被各個瀏覽器兼容

碰到幾率：5%

解決方案：如果我們要設置一個標簽的最小高度200px，需要進行的設置為：

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

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

六、const問題

說明:Firefox下,可以使用const關鍵字或var關鍵字來定義常量;

IE下,只能使用var關鍵字來定義常量.

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

七. window.location.href問題

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

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

解決方法：使用window.location來代替window.location.href.

八、 ul和ol列表縮進問題

消除ul、ol等列表的縮進時，樣式應寫成：

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

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

九、IE與寬度和高度的問題

IE不認得min-這個定義，但實際上它把正常的width和height當作有min的情況來使。這樣問題就大了，如果只用寬度和高度，正常的瀏覽器里這兩個值就不會變，如果只用min-width和min-height的話，IE下面根本等于沒有設置寬度和高度。

比如要設置背景圖片，這個寬度是比較重要的。要解決這個問題，可以這樣：

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

十、頁面的最小寬度

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

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

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

感謝各位的閱讀！關于如何解決瀏覽器兼容性問題就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

文章題目：如何解決瀏覽器兼容性問題
本文URL：http://aaarwkj.com/article12/pjcsdc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設計、小程序開發(fā)、虛擬主機、營銷型網(wǎng)站建設、自適應網(wǎng)站、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)