當我們在進行前端網頁開發，編寫頁面的css樣式的時候，往往是需要考慮的不同瀏覽器的兼容問題的，讓我們設計開發的前端頁面可以在不同的瀏覽器上都可以正常展示。本章我們就帶給大家一些解決瀏覽器相容性的小技巧，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
一、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);}二、不同瀏覽器的標籤預設的外補丁和內補丁不同，隨便寫幾個標籤，不加樣式控制的情況下，各自的margin 和padding差異較大，碰到頻率:100%
解決方案：
* {margin:0;padding:0;}備註：這個是最常見的也是最容易解決的一個瀏覽器相容性問題，幾乎所有的css檔案開頭都會用通配符來設定各個標籤的內外補丁是0。
三、設定較小高度標籤（一般小於10px），在ie6，ie7，遨遊中高度超出自己設定高度
問題症狀：ie6、7和遨遊裡這個標籤的高度不受控制，超出自己設定的高度
碰到頻率：60%
解決方案：為超出高度的標籤設定overflow:hidden;或者設定行高line-height 小於你設定的高度。
備註：這種情況一般出現在我們設定小圓角背景的標籤裡。出現這個問題的原因是ie8之前的瀏覽器都會給標籤一個最小預設的行高的高度。即使你的標籤是空的，這個標籤的高度還是會達到預設的行高。
四、圖片預設有間距
問題症狀：幾個img標籤放在一起的時候，有些瀏覽器會有預設的間距，加上問題一中提到的通配符也不起作用。
碰到幾率：20%
解決方案：使用float屬性為img佈局
備註：因為img標籤是行內屬性標籤，所以只要不超出容器寬度，img標籤都會排在一行裡，但是部分瀏覽器的img標籤之間會有個間距。去掉這個間距使用float是正道
五、標籤最低高度設定min-height不相容
問題症狀：因為min-height本身就是一個不相容的css屬性，所以設定min-height時不能很好的被各個瀏覽器相容
碰到幾率：5%
解決方案：如果我們要設定一個標籤的最小高度200px，需要進行的設定為：
{min-height:200px; height:auto !important; height:200px; overflow:visible;}備註：在B/S系統前端開啟時，有很多情況下我們有這種需求。當內容小於一個值（如300px）時。容器的高度為300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個相容性問題。
六、const問題
說明:Firefox下,可以使用const關鍵字或var關鍵字定義常數;
##IE下,只能使用var關鍵字來定義常數.解決方法：統一使用var關鍵字來定義常數.
七. window.location .href問題
解決方法：使用window.location來取代window.location.href.
##八、 ul和ol列表縮排問題
消除ul、ol等清單的縮排時，樣式要寫成：
list-style:none;margin:0px;padding:0px;
經驗證，在IE中，設定margin:0px可以去除列表的上下左右縮排、空白以及列表編號或圓點，設定padding對樣式沒有影響；在Firefox 中，設定margin:0px僅可以去除上下的空白，設定padding:0px後僅可以去掉左右縮進，還必須設定list- style:none才能移除清單編號或圓點。也就是說，在IE中只設定margin:0px即可達到最終效果，而在Firefox中必須同時設定margin:0px、 padding:0px以及list-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，要實現最小寬度，可用下面的方法：
######################################################################
第一個min-width是正常的；但第2行的width使用了Javascript，這只有IE才認得，這也會讓你的HTML文件不太正規。它實際上透過Javascript的判斷來實現最小寬度。
以上是解決瀏覽器相容性的小技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！
