當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

前端开发中游览器的兼容问题总结

發(fā)布時(shí)間：2025/3/12 HTML 34 豆豆

生活随笔收集整理的這篇文章主要介紹了前端开发中游览器的兼容问题总结小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

首先，為什么各種瀏覽器會(huì)產(chǎn)生兼容性問(wèn)題？

產(chǎn)生這個(gè)問(wèn)題的主要原因是市面上的瀏覽器的種類很多，但由于不同的瀏覽器的內(nèi)核不一致，從而導(dǎo)致各個(gè)瀏覽器對(duì)網(wǎng)頁(yè)的解析就產(chǎn)生了差異。

對(duì)于解決瀏覽器兼容性問(wèn)題，我們要從三個(gè)方面入手：html部分、css部分、js部分。

1、html部分

1、最突出也是最容易想到的就是高版本的瀏覽器用了低版本的瀏覽器無(wú)法識(shí)別的元素，從而導(dǎo)致不能解析。這點(diǎn)主要體現(xiàn)在html5的新標(biāo)簽上

解決辦法是：htmlshim框架可以讓低于IE9的瀏覽器支持html5

2、img的alt屬性，在圖片不存在的情況下，各瀏覽器的解析不一致

在chrome下顯示的是一張破損的圖片，在ff下顯示的是alt的文字，而在IE中顯示的是破損的圖片加文字

3、ul標(biāo)簽內(nèi)外邊距問(wèn)題

ul標(biāo)簽在IE6\IE7中，有個(gè)默認(rèn)的外邊距，但是在IE8以上及其他瀏覽器中有個(gè)默認(rèn)的內(nèi)邊距

2、css部分

1、css的hack問(wèn)題：主要針對(duì)IE的不同版本，不同的瀏覽器的寫(xiě)法不同

IE的條件注釋hack：

2、IE6雙邊距問(wèn)題：IE6在浮動(dòng)后，又有橫向的margin，此時(shí)，該元素的外邊距是其值的2倍

解決辦法：display:block;

3、IE6下圖片的下方有空隙

解決方法：給img設(shè)置display:block;

4、IE6下兩個(gè)float之間會(huì)有個(gè)3px的bug

解決辦法：給右邊的元素也設(shè)置float:left;

5、IE6下沒(méi)有min-width的概念，其默認(rèn)的width就是min-width

6、IE6下在使用margin:0 auto;無(wú)法使其居中

解決辦法：為其父容器設(shè)置text-align:center;

7、被點(diǎn)擊過(guò)后的超鏈接不再具有hover和active屬性

解決辦法:按lvha的順序書(shū)寫(xiě)css樣式

8、在使用絕對(duì)定位或者相對(duì)定位后，IE中設(shè)置z-index失效，原因是因?yàn)槠湓匾蕾囉诟冈氐膠-index，但是父元素默認(rèn)為0，子高父低，所以不會(huì)改變顯示的順序

9、IE6下無(wú)法設(shè)置1px的行高，原因是由其默認(rèn)行高引起的

解決辦法：為期設(shè)置overflow:hidden;或者line-height:1px;

3、js部分

1、標(biāo)準(zhǔn)的事件綁定方法函數(shù)為addEventListener，但I(xiàn)E下是attachEvent；

2、事件的捕獲方式不一致，標(biāo)準(zhǔn)瀏覽器是由外至內(nèi)，而IE是由內(nèi)到外，但是最后的結(jié)果是將IE的標(biāo)準(zhǔn)定為標(biāo)準(zhǔn)

3、我們常說(shuō)的事件處理時(shí)的event屬性，在標(biāo)準(zhǔn)瀏覽器其是傳入的，IE下由window.event獲取的。并且獲取目標(biāo)元素的方法也不同，標(biāo)準(zhǔn)瀏覽器是event.target，而IE下是event.srcElement

4、在低版本的IE中獲取的日期處理函數(shù)的值不是與1900的差值，但是在高版本的IE中和標(biāo)準(zhǔn)瀏覽器保持了一致，獲取的值也是與1900的差值。

比如：var year= new Date().getYear();

5、ajax的實(shí)現(xiàn)方式不同，這個(gè)我所理解的是獲取XMLHttpRequest的不同，IE下是activeXObject

6、IE中不能操作tr的innerHtml

7、獲得DOM節(jié)點(diǎn)的父節(jié)點(diǎn)、子節(jié)點(diǎn)的方式不同

對(duì)于常見(jiàn)的游覽器兼容性問(wèn)題的解決

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

2、高度問(wèn)題
兩上下排列或嵌套的div，上面的div設(shè)置高度(height)，如果div里的實(shí)際內(nèi)容大于所設(shè)高度，在FF中會(huì)出現(xiàn)兩個(gè)div重疊的現(xiàn)象；但在IE中，下面的div會(huì)自動(dòng)給上面的div讓出空間所以為避免出現(xiàn)層的重疊，高度一定要控制恰當(dāng)，或者干脆不寫(xiě)高度，讓他自動(dòng)調(diào)節(jié)，比較好的方法是 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;}

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

4、IE浮動(dòng) margin產(chǎn)生的雙倍距離

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

5、padding問(wèn)題
Firefox設(shè)置 padding 后，div會(huì)增加 height 和 width，但I(xiàn)E不會(huì) （* 標(biāo)準(zhǔn)的 XHTML1.0 定義 dtd 好像一致了）高度控制恰當(dāng)，或嘗試使用 height:100%;寬度減少使用 padding但根據(jù)實(shí)際經(jīng)驗(yàn)，一般FF和IE的 padding 不會(huì)有太大區(qū)別，div 的實(shí)際寬 = width + padding ，所以div寫(xiě)全 width 和 padding，width 用實(shí)際想要的寬減去 padding 定義。

6、div嵌套時(shí) y軸上 padding和 marign的問(wèn)題
Firefox里 y 軸上子div 到父div 的距離為父padding + 子marign

IE里 y 軸上子div 到父div 的距離為父padding 和子marign 里大的一個(gè)

Firefox里 y 軸上父padding=0 且 border=0 時(shí)，子div 到父div 的距離為0，子marign 作用到父div 外面

7、padding，marign，height，width解決技巧
注意是技巧，不是方法：

寫(xiě)好標(biāo)準(zhǔn)頭

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”>

高盡量用padding，慎用margin，height盡量補(bǔ)上100%，父級(jí)height有定值子級(jí)height不用100%，子級(jí)全為浮動(dòng)時(shí)底部補(bǔ)個(gè)空clear:both的div寬盡量用margin，慎用padding，width算準(zhǔn)實(shí)際要的減去padding

8、列表類

ul標(biāo)簽在Firefox中默認(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;}
9、顯示類（display:block,inline）

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

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

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

display:table; //for Firefox,模擬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;

10、背景、圖片類

background顯示問(wèn)題

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

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

IE: filter: progid: DXImageTransform.Microsoft.Alpha(style=0,opacity=60);IE: filter: alpha(opacity=10);FF: opacity:0.6;FF: -moz-opacity:0.10;

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

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

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

12、著名的 Meyer Reset（重置）

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6，p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td{margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: baseline;}:focus {outline: 0;}body {line-height: 1;color: black;background: white;}ol, ul {list-style: none;}table {border-collapse: separate;border-spacing: 0;}caption, th, td {text-align: left;font-weight: normal;}blockquote:before, blockquote:after,q:before, q:after {content: "";}blockquote, q {quotes: "" "";}

13、跨瀏覽器的CSS透明度

.transparent {opacity: 0.7;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";filter: alpha(opacity=70);-moz-opacity: 0.7;-khtml-opacity: 0.7;

14、文字陰影（C3）

.text { text-shadow: 1px 1px 1px #666; filter: Shadow(Color=#666666, Direction=135, Strength=5); }

15、Box陰影(C3)

.box { box-shadow: 5px 5px 5px #666; -moz-box-shadow: 5px 5px 5px #666; -webkit-box-shadow: 5px 5px 5px #666; }

16、Sticky Footer (讓頁(yè)腳永遠(yuǎn)停靠在頁(yè)面底部，而不是根據(jù)絕對(duì)位置)

CSS:

* { margin:0; padding:0; }html, body, #wrap { height: 100%; }body > #wrap {height: auto; min-height: 100%;}#main { padding-bottom: 150px; }#footer {position: relative;margin-top: -150px;height: 150px;clear:both;}.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {display: inline-block;}* html .clearfix { height: 1%;}.clearfix {display: block;}

17、iframe元素內(nèi)嵌頁(yè)面如何去掉繼承的html及body背景色/背景圖片
iframe元素的功能是在一個(gè)文檔里內(nèi)嵌一個(gè)文檔，創(chuàng)建一個(gè)浮動(dòng)的幀。內(nèi)嵌文檔時(shí)一個(gè)完整的頁(yè)面，有HTML,BODY等屬性。這樣遇到了一個(gè)問(wèn)題，如果樣式表中對(duì)BODY定義過(guò)背景色/背景圖片，那么內(nèi)嵌文檔將全部繼承過(guò)來(lái)。所以如何去掉背景色和背景圖片：

【1】去掉背景色：filter:Chroma(Color=white);

示例

【2】去掉背景圖片：

示例：

注意：內(nèi)嵌頁(yè)面同時(shí)也要增加BODY屬性：

18、為什么web標(biāo)準(zhǔn)中無(wú)法設(shè)置IE瀏覽器滾動(dòng)條顏色了？
原來(lái)樣式設(shè)置：

解決辦法是將body換成html。

19、為什么火狐瀏覽器下文本無(wú)法撐開(kāi)容器的高度？
標(biāo)準(zhǔn)瀏覽器中固定高度值的容器是不會(huì)象IE6里那樣被撐開(kāi)的,那我又想固定高度，又想能被撐開(kāi)需要怎樣設(shè)置呢？辦法就是去掉height設(shè)置min-height:200px; 這里為了照顧不認(rèn)識(shí)min-height的IE6 可以這樣定義：

div { height:auto!important; height:200px; min-height:200px; }

20、如何定義1px左右高度的容器？
IE6下這個(gè)問(wèn)題是因?yàn)槟J(rèn)的行高造成的，解決的方法也有很多。

示例

overflow:hidden | zoom:0.08 | line-height:1px

21、怎么樣才能讓層顯示在FLASH之上呢？
解決的辦法是給FLASH設(shè)置透明:

22、怎樣使一個(gè)div層居中于瀏覽器中？

23、怎樣使div背景透明？
首先，需要這兩個(gè)層都是兄弟關(guān)系，其次，這兩個(gè)層都需要絕對(duì)定位。

示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="author" content="colinivy" /><title> Colinivy's world</title><style type="text/css">body {font:normal 12px/30px Verdana; }#test {position:relative;width:400px;height:50px;}#inner {z-index:2;position:absolute;top:10px;left:10px;width:380px;height:30px;color:#003;font-weight:bold;text-align:center;}#transbox {z-index:1;position:absolute;top:0px;left:0px;width:400px;height:50px;background:#eef;border:1px solid #a00;filter:alpha(opacity=40);-moz-opacity:0.4;opacity:0.4;}</style></head><body><div id="test"><div><p>這里很多的文字,這里很多的文字,這里很多的文字,這里很多的文字,</p></div><div id="transbox"></div><div id="inner">BlueIdea,BlueIdea,BlueIdea</div></div></body></html>

24、怎樣去掉選中時(shí)的虛線框？
利用οnfοcus=“this.blur();”

示例

25、ie6下png背景顯示問(wèn)題？

針對(duì)ie6下png背景顯示問(wèn)題,CSS中可以這樣解決:_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’http://www.0351zhuangxiu.com/uploads/images/bj.jpg’);

26、文字與表單對(duì)齊方法？
設(shè)置表單元素第一字體為Tahoma(Verdana系列也可),并設(shè)置vertical-align:middle.建設(shè)大家把這個(gè)約定寫(xiě)入CSS RESET中,能減小很多麻煩:

body,button,input,select,textarea{font:12px/1.5 tahoma,arial,sans-serif; vertical-align:middle}

27、optgroup標(biāo)簽的用法？
optgroup標(biāo)簽,鮮為人知,它對(duì)提升選擇表單用戶體驗(yàn)很有幫助。就是可以在有很多選項(xiàng)時(shí),對(duì)這些選項(xiàng)分組：

示例

<select id="selectId"><optgroup label="GROUP ONE"><option value="1">one select</option><option value="2">two select</option></optgroup><optgroup label="GROUP TWO"><option value="3">three select</option><option value="4">four select</option></optgroup></select>

28、文字與圖片垂直居中對(duì)齊方法？
為圖片與文字的共同父元素所有的后代元素定義*{vertical-align:middle};例如:

只需定義p*{vertical-align:middle}即可使文字與圖片同行垂直居中.

29、文章標(biāo)題列表中日期居右顯示的兩種方法？
方法A相對(duì)方法B省資源,但比方法B要多寫(xiě)兩句代碼,使用時(shí)請(qǐng)視情況而定:

方法一：

<p>這是文章標(biāo)題<span>2020-02-07</span></p>

然后定義p和span的樣式：

p{ position:relative}p span{ position:absolute; right:0}

方法二:

<p><span>2020-02-07</span>這是文章標(biāo)題</p>

然后定義span右浮動(dòng):

p span{float:right}

30、ie6下max/min-width/height實(shí)現(xiàn)？

ie6下max/min-width/height實(shí)現(xiàn),_width: expression_r(this.width >600 ? “600px” : true);,height同理.

31、空白外邊距互相疊加的問(wèn)題？
一般通過(guò)添加透明邊框或者1px的內(nèi)邊距避免；

其一,為外圍元素定義透明邊框.具體到本例,即在樣式div中加入

border:1px solid transparent;

其二,為外圍元素定義內(nèi)邊距填充…具體到本例,即在樣式div中加入padding:1px；

示例

<!doctype html><html><head><meta charset="utf-8"><title>空白邊距疊加demo@Mr.Think</title><style>body{width:300px; font-family:'微軟雅黑'; font-size:1em; text-indent:10px; line-height:1.25}div{background:#a40000;margin:10px}div p{background:#eee;margin:15px}</style></head><body><div><p>空白邊距疊加demo@Mr.Think</p></div></body></html>

32、網(wǎng)頁(yè)設(shè)計(jì)中的默認(rèn)字體

font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;

說(shuō)明：line-height采用1.5, 也就是18px. 這是淘寶視覺(jué)規(guī)范中定義的行高，對(duì)于12px字體，這個(gè)行高看起來(lái)很舒服。font-family默認(rèn)采用Tahoma. Tahoma是英文Windows操作系統(tǒng)的默認(rèn)字體，這個(gè)字體比較均衡，顯示中英文混排很不錯(cuò)，是經(jīng)久耐看的一款字體。

33、瀏覽器兼容——常用的css hack

（1）.title{ height:200px;*height:200px;_height:200px; } （2）.title{ height:200px;*height:200px !important;*height:200px; } （3）.title{ height:200px; }*html.title{ height:200px;}*+html.title{ height:200px;}

了解更多關(guān)注我喲！！！

總結(jié)

以上是生活随笔為你收集整理的前端开发中游览器的兼容问题总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。