工作中常用的十大瀏覽器兼容性問題

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

前端兼容性問題一：padding

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

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

前端兼容性問題二：高度

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

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

.float_bottom

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

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

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

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

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

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

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

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

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

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

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

1. display:block,inline兩個元素

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

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

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

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

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

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

display:inline 就是將元素顯示為行內(nèi)元素，元素的特點是：和其他元素都在一行上；高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。<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最小高度的實現(xiàn)（兼容IE6、IE7、Firefox）

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

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

前端兼容性問題十：為什么web標準中無法設(shè)置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;}

原來樣式設(shè)置：

解決辦法是將body換成html。

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

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

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

廣告

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