當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2025/3/12 HTML 24 豆豆

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

首先，為什么各種瀏覽器會產生兼容性問題？

產生這個問題的主要原因是市面上的瀏覽器的種類很多，但由于不同的瀏覽器的內核不一致，從而導致各個瀏覽器對網頁的解析就產生了差異。

對于解決瀏覽器兼容性問題，我們要從三個方面入手：html部分、css部分、js部分。

1、html部分

1、最突出也是最容易想到的就是高版本的瀏覽器用了低版本的瀏覽器無法識別的元素，從而導致不能解析。這點主要體現在html5的新標簽上

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

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

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

3、ul標簽內外邊距問題

ul標簽在IE6\IE7中，有個默認的外邊距，但是在IE8以上及其他瀏覽器中有個默認的內邊距

2、css部分

1、css的hack問題：主要針對IE的不同版本，不同的瀏覽器的寫法不同

IE的條件注釋hack：

2、IE6雙邊距問題：IE6在浮動后，又有橫向的margin，此時，該元素的外邊距是其值的2倍

解決辦法：display:block;

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

解決方法：給img設置display:block;

4、IE6下兩個float之間會有個3px的bug

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

5、IE6下沒有min-width的概念，其默認的width就是min-width

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

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

7、被點擊過后的超鏈接不再具有hover和active屬性

解決辦法:按lvha的順序書寫css樣式

8、在使用絕對定位或者相對定位后，IE中設置z-index失效，原因是因為其元素依賴于父元素的z-index，但是父元素默認為0，子高父低，所以不會改變顯示的順序

9、IE6下無法設置1px的行高，原因是由其默認行高引起的

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

3、js部分

1、標準的事件綁定方法函數為addEventListener，但IE下是attachEvent；

2、事件的捕獲方式不一致，標準瀏覽器是由外至內，而IE是由內到外，但是最后的結果是將IE的標準定為標準

3、我們常說的事件處理時的event屬性，在標準瀏覽器其是傳入的，IE下由window.event獲取的。并且獲取目標元素的方法也不同，標準瀏覽器是event.target，而IE下是event.srcElement

4、在低版本的IE中獲取的日期處理函數的值不是與1900的差值，但是在高版本的IE中和標準瀏覽器保持了一致，獲取的值也是與1900的差值。

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

5、ajax的實現方式不同，這個我所理解的是獲取XMLHttpRequest的不同，IE下是activeXObject

6、IE中不能操作tr的innerHtml

7、獲得DOM節點的父節點、子節點的方式不同

對于常見的游覽器兼容性問題的解決

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

2、高度問題
兩上下排列或嵌套的div，上面的div設置高度(height)，如果div里的實際內容大于所設高度，在FF中會出現兩個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;}

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

4、IE浮動 margin產生的雙倍距離

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

5、padding問題
Firefox設置 padding 后，div會增加 height 和 width，但IE不會（* 標準的 XHTML1.0 定義 dtd 好像一致了）高度控制恰當，或嘗試使用 height:100%;寬度減少使用 padding但根據實際經驗，一般FF和IE的 padding 不會有太大區別，div 的實際寬 = width + padding ，所以div寫全 width 和 padding，width 用實際想要的寬減去 padding 定義。

6、div嵌套時 y軸上 padding和 marign的問題
Firefox里 y 軸上子div 到父div 的距離為父padding + 子marign

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

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

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

寫好標準頭

<!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盡量補上100%，父級height有定值子級height不用100%，子級全為浮動時底部補個空clear:both的div寬盡量用margin，慎用padding，width算準實際要的減去padding

8、列表類

ul標簽在Firefox中默認是有 padding值的，而在IE中只有margin有值

先定義 ul {margin:0;padding:0;}

ul和ol列表縮進問題消除ul、ol等列表的縮進時，樣式應寫成: {list-style:none;margin:0px;padding:0px;}
9、顯示類（display:block,inline）

display:block,inline兩個元素

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

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

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

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

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

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

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

<span>，<a>，<label>，<input>，<img>，<strong> 和 <em> 是 inline 元素的例子

2.鼠標手指狀顯示

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

10、背景、圖片類

background顯示問題

全部注意補齊 width，height 屬性

2.背景透明問題

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

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

11、min-height最小高度的實現（兼容IE6、IE7、FF）
作用是：當容器的內容較少時，能保持一個最小的高度，以免破壞了布局或UI設計效果。而當容器內的內容增加的時候，容器能夠自動的伸展以適應內容的變化。

#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 (讓頁腳永遠停靠在頁面底部，而不是根據絕對位置)

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元素內嵌頁面如何去掉繼承的html及body背景色/背景圖片
iframe元素的功能是在一個文檔里內嵌一個文檔，創建一個浮動的幀。內嵌文檔時一個完整的頁面，有HTML,BODY等屬性。這樣遇到了一個問題，如果樣式表中對BODY定義過背景色/背景圖片，那么內嵌文檔將全部繼承過來。所以如何去掉背景色和背景圖片：

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

示例

【2】去掉背景圖片：

示例：

注意：內嵌頁面同時也要增加BODY屬性：

18、為什么web標準中無法設置IE瀏覽器滾動條顏色了？
原來樣式設置：

解決辦法是將body換成html。

19、為什么火狐瀏覽器下文本無法撐開容器的高度？
標準瀏覽器中固定高度值的容器是不會象IE6里那樣被撐開的,那我又想固定高度，又想能被撐開需要怎樣設置呢？辦法就是去掉height設置min-height:200px; 這里為了照顧不認識min-height的IE6 可以這樣定義：

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

20、如何定義1px左右高度的容器？
IE6下這個問題是因為默認的行高造成的，解決的方法也有很多。

示例

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

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

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

23、怎樣使div背景透明？
首先，需要這兩個層都是兄弟關系，其次，這兩個層都需要絕對定位。

示例

<!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、怎樣去掉選中時的虛線框？
利用οnfοcus=“this.blur();”

示例

25、ie6下png背景顯示問題？

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

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

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

27、optgroup標簽的用法？
optgroup標簽,鮮為人知,它對提升選擇表單用戶體驗很有幫助。就是可以在有很多選項時,對這些選項分組：

示例

<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、文字與圖片垂直居中對齊方法？
為圖片與文字的共同父元素所有的后代元素定義*{vertical-align:middle};例如:

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

29、文章標題列表中日期居右顯示的兩種方法？
方法A相對方法B省資源,但比方法B要多寫兩句代碼,使用時請視情況而定:

方法一：

<p>這是文章標題<span>2020-02-07</span></p>

然后定義p和span的樣式：

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

方法二:

<p><span>2020-02-07</span>這是文章標題</p>

然后定義span右浮動:

p span{float:right}

30、ie6下max/min-width/height實現？

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

31、空白外邊距互相疊加的問題？
一般通過添加透明邊框或者1px的內邊距避免；

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

border:1px solid transparent;

其二,為外圍元素定義內邊距填充…具體到本例,即在樣式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、網頁設計中的默認字體

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

說明：line-height采用1.5, 也就是18px. 這是淘寶視覺規范中定義的行高，對于12px字體，這個行高看起來很舒服。font-family默認采用Tahoma. Tahoma是英文Windows操作系統的默認字體，這個字體比較均衡，顯示中英文混排很不錯，是經久耐看的一款字體。

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

了解更多關注我喲！！！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。