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

對(duì)于web前端的學(xué)習(xí)有不懂的，或者不知道學(xué)習(xí)路線,，不知道學(xué)習(xí)方法,，不知道該如何扎實(shí)能找到工作的朋友，可以來(lái)我們頭條前端群611428142,，全套系統(tǒng)學(xué)習(xí)資料已上傳群文件,！

前端兼容性問(wèn)題一：padding

在Firefox設(shè)置了 padding一后，div會(huì)增加 height和 width,，但I(xiàn)E不會(huì) ,。

解決方式：嘗試使用 height:100%或者控制好高度;寬度減少使用 padding但根據(jù)實(shí)際經(jīng)驗(yàn)，一般Firefox和IE的 padding不會(huì)有太大區(qū)別,，div的實(shí)際寬 = width + padding ,，所以div寫全 width和 padding,，width用實(shí)際想要的寬減去 padding定義。

前端兼容性問(wèn)題二：高度

兩上下排列或嵌套的div,，上面的div設(shè)置height,，如果div里的實(shí)際內(nèi)容大于所設(shè)高度，在Firefox中會(huì)出現(xiàn)兩個(gè)div重疊的現(xiàn)象,；在IE中,，下面的div會(huì)自動(dòng)給上面的div讓出空間

解決方式：高度要控制恰當(dāng)，比較好的方法是 height:100%;但當(dāng)這個(gè)div里面一級(jí)的元素都float了的時(shí)候,，則需要在div塊的最后,，閉和前加一個(gè)沉底的空div，對(duì)應(yīng)CSS是：

.float_bottom

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

前端兼容性問(wèn)題三：IE浮動(dòng) margin產(chǎn)生的雙倍距離

前端兼容性問(wèn)題四：clear:both;

不想受到float浮動(dòng)的,，就在div中寫入clear:both;

前端兼容性問(wèn)題五：居中問(wèn)題

div里的內(nèi)容,，IE默認(rèn)為居中，而Firefox默認(rèn)為左對(duì)齊,，可以嘗試增加代碼margin: 0 auto;

前端兼容性問(wèn)題六：列表類

• ul標(biāo)簽在FF中默認(rèn)是有 padding值的,，而在IE中只有margin有值先定義 ul {margin:0;padding:0;}

• ul和ol列表縮進(jìn)問(wèn)題消除ul、ol等列表的縮進(jìn)時(shí),，樣式應(yīng)寫成:{list-style:none;margin:0px;padding:0px;}

前端兼容性問(wèn)題七：顯示類（display:block,inline）

1. display:block,inline兩個(gè)元素

display:block; //可以為內(nèi)嵌元素模擬為塊元素

display:inline; //實(shí)現(xiàn)同一行排列的的效果

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

display:block塊元素,，元素的特點(diǎn)是：

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

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

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

2.鼠標(biāo)手指狀顯示

全部用標(biāo)準(zhǔn)的寫法 cursor: pointer;

前端兼容性問(wèn)題八:背景,、圖片類

1. background顯示問(wèn)題

全部注意補(bǔ)齊 width,，height屬性

2.背景透明問(wèn)題

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

IE: filter: alpha(opacity=10);

Firefox: opacity:0.6;

Firefox: -moz-opacity:0.10;

最好兩個(gè)都寫,，并將opacity屬性放在下面

前端兼容性問(wèn)題九:min-height最小高度的實(shí)現(xiàn)（兼容IE6、IE7,、Firefox）

作用是：當(dāng)容器的內(nèi)容較少時(shí),，能保持一個(gè)最小的高度，以免破壞了布局或UI設(shè)計(jì)效果,。而當(dāng)容器內(nèi)的內(nèi)容增加的時(shí)候,，容器能夠自動(dòng)的伸展以適應(yīng)內(nèi)容的變化。

前端兼容性問(wèn)題十：為什么web標(biāo)準(zhǔn)中無(wú)法設(shè)置IE瀏覽器滾動(dòng)條顏色了,？

原來(lái)樣式設(shè)置：

解決辦法是將body換成html,。