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

前端兼容性問(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寫(xiě)全 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)生的雙倍距離

#box{
float:left;
wiadth:100px;
margin:0 0 0 100px;//這種情況之下IE會(huì)產(chǎn)生200px的距離
display:inline;//使浮動(dòng)忽略

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

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

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

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

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

·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)寫(xiě)成:{list-style:none;margin:0px;padding:0px;}

前端兼容性問(wèn)題七：顯示類(lèi)（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)是：

總是在新行上開(kāi)始；高度，行高以及頂和底邊距都可控制；寬度缺省是它的容器的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)的寫(xiě)法 cursor: pointer;

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

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è)都寫(xiě)，并將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)容的變化。

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

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

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;}

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

解決辦法是將body換成html。

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司！

新聞標(biāo)題：工作中常用的十大瀏覽器兼容性問(wèn)題
文章來(lái)源：http://chinadenli.net/news27/316927.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、虛擬主機(jī)、小程序開(kāi)發(fā)、ChatGPT、商城網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)

廣告

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