兼容性一直都是前端工程師最頭疼的一個問題，也是前端面試最常考的一個方面，今天看到一位前端程序員總結的一份很好的關于瀏覽器兼容性問題的文章，正好最近群里有許多的需要面試伙伴，所以稍微挑了十個常用的瀏覽器兼容問題分享出來，希望大家面試順利！

前端兼容性問題一：padding

在Firefox設置了 padding 一后，div會增加 height 和 width，但IE不會 。

解決方式：嘗試使用 height:100%或者控制好高度;寬度減少使用 padding但根據實際經驗，一般Firefox和IE的 padding 不會有太大區別，div 的實際寬 = width + padding ，所以div寫全 width 和 padding，width 用實際想要的寬減去 padding 定義。

前端兼容性問題二：高度

兩上下排列或嵌套的div，上面的div設置height，如果div里的實際內容大于所設高度，在Firefox中會出現兩個div重疊的現象；在IE中，下面的div會自動給上面的div讓出空間

解決方式：高度要控制恰當，比較好的方法是 height:100%;但當這個div里面一級的元素都float了的時候，則需要在div塊的最后，閉和前加一個沉底的空div，對應CSS是：

.float_bottom

{clear:both;height:0px;font-size:0px;padding:0;margin:0;border:0;line-height:0px;overflow:hidden;}

前端兼容性問題三：IE浮動 margin產生的雙倍距離

#box{
float:left;
wiadth:100px;
margin:0 0 0 100px;//這種情況之下IE會產生200px的距離
display:inline;//使浮動忽略

前端兼容性問題四：clear:both;

不想受到float浮動的，就在div中寫入clear:both;

前端兼容性問題五：居中問題

div里的內容，IE默認為居中，而Firefox默認為左對齊，可以嘗試增加代碼margin: 0 auto;

前端兼容性問題六：列表類

·ul標簽在FF中默認是有 padding值的，而在IE中只有margin有值先定義 ul {margin:0;padding:0;}

·ul和ol列表縮進問題消除ul、ol等列表的縮進時，樣式應寫成:{list-style:none;margin:0px;padding:0px;}

前端兼容性問題七：顯示類（display:block,inline）

1. display:block,inline兩個元素

display:block; //可以為內嵌元素模擬為塊元素

display:inline; //實現同一行排列的的效果

display:table; //for FF,模擬table的效果

display:block 塊元素，元素的特點是：

總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的100%，除非設定一個寬度

<div>，<p>，<h1>，<form>，<ul> 和 <li> 是塊元素的例子

display:inline 就是將元素顯示為行內元素，元素的特點是：和其他元素都在一行上；高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 inline 元素的例子

2.鼠標手指狀顯示

全部用標準的寫法 cursor: pointer;

前端兼容性問題八:背景、圖片類

1. background顯示問題

全部注意補齊 width，height 屬性

2.背景透明問題

IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);

IE: filter: alpha(opacity=10);

Firefox: opacity:0.6;

Firefox: -moz-opacity:0.10;

最好兩個都寫，并將opacity屬性放在下面

前端兼容性問題九:min-height最小高度的實現（兼容IE6、IE7、Firefox）

作用是：當容器的內容較少時，能保持一個最小的高度，以免破壞了布局或UI設計效果。而當容器內的內容增加的時候，容器能夠自動的伸展以適應內容的變化。

#mrjin {
    background: #ccc;
    min-height: 100px;
    height: auto !important;
    height: 100px;
    overflow: visible;
}

前端兼容性問題十：為什么web標準中無法設置IE瀏覽器滾動條顏色了？

body {
    scrollbar-face-color: #f6f6f6;
    scrollbar-highlight-color: #fff;
    scrollbar-shadow-color: #eee;
    scrollbar-3dlight-color: #eee;
    scrollbar-arrow-color: #000;
    scrollbar-track-color: #fff;
    scrollbar-darkshadow-color: #fff;}

原來樣式設置：

解決辦法是將body換成html。

本文來源于成都網站建設公司與成都網站設計制作公司-創新互聯成都公司！

新聞標題：工作中常用的十大瀏覽器兼容性問題
文章來源：http://www.js-pz168.com/news27/316927.html

成都網站建設公司_創新互聯，為您提供建站公司、虛擬主機、小程序開發、ChatGPT、商城網站、品牌網站設計

廣告

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