當前位置:首頁 » 網頁前端 » 前端ie瀏覽器兼容
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端ie瀏覽器兼容

發布時間: 2022-11-30 08:34:04

『壹』 ie瀏覽器如何添加兼容性

方法如下:
1、首先打開電腦,進入到電腦桌面中。
2、然後打開IE瀏覽器,點擊打開右上角工具齒輪就可以看到「兼容性視圖設置」,點擊打開它。
3、然後在彈出來的窗口中輸入想要設置兼容的網站,點擊後面的「添加」。
4、然後點擊打開最下方的兩個選擇,車確定即可。

『貳』 前端 PC端兼容性問題總結

1.如果圖片加a標簽在IE9-中會有邊框

2.rgba不支持IE8

3.display:inline-block ie6/7不支持

4.默認的 body 沒有 body 去掉 margin 情況下ie5、6、7邊緣會很寬margin-top加倍 如果處於無聲明狀態那麼所有的ie瀏覽器margin-top加倍
解決方案:用 css 給 body 添加 magin 屬性為0px

5. IE 6.0 Firefox Opera 等是 真實寬度=width+padding+border
IE5.X 真實寬度=width
解決方案:
方法1.

方法2.

6. height 不能小於16px,設置較小高度標簽(一般小於10px),在IE6,IE7,遨遊中高度超出自己設置高度

7. min-height 不兼容 ie6 7解釋為超過高度就撐開,而其他版本瀏覽器則遮蓋下面的層

8. position:fixed IE5 6無法識別此屬性

9.浮動的div有 margin_left 屬性ie6會加倍 無論兼容視圖還是無聲明視圖

10. cursor 兼容 自定義指針cur格式的圖片url路徑問題無論是兼容還是無聲明版本

11.png圖片 IE6裡面的png圖片不能透明 兼容版本和無聲明版本都是

12.img浮動 img標簽打回車會造成每個圖片之間有縫隙
解決方案:可以刪除之間的回車鍵也可以讓這些圖片浮動

13.在IE瀏覽器下 input type="text" 文本框點擊時後面會出現"X",以及 type="password "後面會出現眼睛,如何除去這兩種默認樣式

14.CSS3前綴 -webkit- webkit渲染引擎 chrome/safari

-moz- gecko渲染引擎 firefox

-ms- trident渲染引擎 IE

-o- opeck渲染引擎opera

動畫、過渡、 background-size 都需要加前綴

16. PIE.htc 可以實現很多 css3 屬性在IE下的兼容性 如:圓角、陰影、漸變

behavior: url(css/PIE.htc);/ IE邊框陰影 /
}`
背景透明rgba

注: PIE.htc 文件路徑相對是相對於css文件,並非html文件,以上例子是將 PIE.htc 文件放在與css樣式文件同一個文件夾 css 內,而對應的 html 問價與 css 文件夾同級

17.JS實現點擊跳轉到指定位置

『叄』 ie瀏覽器不兼容怎麼弄

ie瀏覽器不兼容的解決方法如下:
1、首先打開IE瀏覽器,隨意進入一個頁面;
2、點擊「工具」選項,會跳出一個菜單,下拉菜單選擇「兼容性視圖設置」選項;
3、進入兼容性視圖設置之後,填入所需要設置兼容模式的網址,點擊添加,最後點擊關閉即可。
InternetExplorer(舊稱:MicrosoftInternetExplorer、WindowsInternetExplorer),簡稱IE或MSIE,是微軟公司推出的圖形用戶界面網頁瀏覽器,曾是使用最廣泛的網頁瀏覽器之一。自從1995年開始,它被內置在各個新版本的Windows作業系統作為默認瀏覽器,也是微軟Windows操作系統組成部分。2015年3月微軟確認將放棄IE品牌,轉而在windows10上,以MicrosoftEdge取代,並停止發布InternetExplorer11之前版本的安全性更新。
更多關於ie瀏覽器不兼容怎麼弄,進入:https://m.abcgonglue.com/ask/4f3b5a1615837924.html?zd查看更多內容

『肆』 前端開發ie瀏覽器的兼容問題怎麼解決

所謂的瀏覽器兼容性問題,是指因為不同的瀏覽器對同一段代碼有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論用戶用什麼
瀏覽器來查看我們的網站或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的兼容性問題是前端開發人員經常會碰到和必須要解決的問題。

在學習瀏覽器兼容性之前,我想把前端開發人員劃分為兩類:
第一類是精確按照設計圖開發的前端開發人員,可以說是精確到1px的,他們很容易就會發現設計圖的不足,並且在很少的情況下會碰到瀏覽器的兼容性問題,而這些問題往往都是瀏覽器的bug,並且他們製作的頁面後期易維護,代碼重用問題少,可以說是比較牢固放心的代碼。
第二類是基本按照設計圖來開發的前端開發人員,很多細枝末節差距很大,不如間距,行高,圖片位置等等經常會差幾px。某種效果的實現也是反復調試得到,具體為什麼出現這種效果還模模糊糊,整體布局十分脆弱。稍有改動就亂七八糟。代碼為什麼這么寫還不知所以然。這類開發人員往往經常為兼容性問題所困。修改好了這個瀏覽器又亂了另一個瀏覽器。改來改去也毫無頭緒。其實他們碰到的兼容性問題大部分不應該歸咎於瀏覽器,而是他們的技術本身了。

『伍』 ie瀏覽器怎麼設置兼容模式設置

IE瀏覽器設置兼容模式步驟如下:

1.打開IE瀏覽器

『陸』 如何設置IE瀏覽器的兼容模式

IE瀏覽器的兼容模式在瀏覽器的設置——兼容性視圖中進行設置,具體的操作方法如下:

1、這里IE11瀏覽器為具體的實例,首先在瀏覽器的主頁面的左上角方向點擊【設置】圖標。

2、進入到瀏覽器的設置的操作頁面以後,然後選擇【兼容性視圖設置(B)】。

3、最後進入到兼容性視圖設置操作頁面以後,在【添加此網站】中輸入你要以兼容性視圖運行的網站,然後點擊【添加】。(以後進入到這個網站的時候就會以兼容模式運行)

『柒』 ie瀏覽器的兼容性怎麼設置

方法如下:
1、在windows的找到IE的瀏覽器,並進行打開ie的瀏覽器。
2、在使用ie的瀏覽器,菜單欄中是無顯示的,需要進行打開,右鍵菜單欄,彈出下拉的菜單中,勾選上「菜單欄」和「兼容性視圖按鈕」。
3、這樣菜單欄中顯示出菜單,然後點擊菜單中「工具」。
4、選中工具完之後,彈出了下拉的菜單中,進行選中「兼容性視圖設置」的選項。
5、這樣就打開兼容性視圖設置,在添加此網站中進行輸入需要作為兼容網址,然後點擊「添加」。
6、在最低端位置中,勾選上所有的選項,這樣的話就可以不用一次一次進行添加網址了。

『捌』 前端面試題之解決瀏覽器兼容性的方案

瀏覽器兼容性涉及的內容有很多,特別是針對IE瀏覽器,以下整理出五種常見的瀏覽器兼容性解決方法。

一、樣式初始化

由於各大瀏覽器會有自身的默認樣式,並且不盡相同,所以為了盡可能的保證樣式的統一性,前端在開發項目之前都會先進行樣式格式化,最常見的分為以下幾個方面。

1.pandding 值和 margin 值均設置為 0

將html、body、a、li、ol、input、textarea、select、button 等標簽的 padding 值和 margin 值設置為 0。

2.html 標簽

設置統一的字體,如果使用 rem 單位,則 html 需要設置合適的字型大小。

3.a 標簽

設置統一的顏色,將 text-decoration 屬性設置為 none。

4.ol 和 li 標簽

list-style 統一設置為 none。

5.input、textarea、select、button 等標簽初始化

border 設置為 none;

根據需要設置顏色和背景色。

二、使用不同類型的瀏覽器內核前綴

1.Chrome(谷歌瀏覽器) 與 Safari(蘋果瀏覽器) 內核:Webkit (中譯無) 前綴:-webkit-

2.IE (IE瀏覽器) 內核:Trident (中譯三叉戟) 前綴:-ms-

3.Firefox (火狐瀏覽器) 內核:Gecko(中譯壁虎) 前綴:-moz-

4.Opera (歐朋瀏覽器) 內核:Presto(中譯迅速) 前綴:-o-

例:

-webkit-border-radius: 10px; / 谷歌瀏覽器 /
-ms-border-radius: 10px; / IE瀏覽器 /
-moz-border-radius: 10px; / 火狐瀏覽器 /
-o-border-radius: 10px; / 歐朋瀏覽器 /
border-radius: 10px;
1
2
3
4
5
三、針對IE瀏覽器不同版本的解決方案

1.對於低版本的 IE 瀏覽器使用 CSS hack( 即給特點前綴)

註:以下符號是寫在屬性名前面。

兼容 IE6 的 hack 符號:- 或 _

兼容 IE6 、7 的 hack 符號:` ~ ! @ # $ % ^ & * ( ) + = [ ] | < > , . 任意一個符號

兼容 IE6、7、8 的 hack 符號:.

註:以下符號是寫在屬性值與分號直接,中間不留空格。

兼容 IE8 的 hack 符號:/

兼容 IE8、9、10 的 hack 符號:

兼容 IE6、7、8、9、10 的 hack 符號:9

例:

/ hack符號在前 /
_border-radius: 10px; / IE6 /
+border-radius: 10px; / IE67 /
.border-radius: 10px; / IE678 /

/ hack符號在後 /
border-radius: 10px/; / IE8 /
border-radius: 10px; / IE8910 /
border-radius: 10px9; / IE678910 /
1
2
3
4
5
6
7
8
9
2.為不同的版本編寫獨立的樣式,其他瀏覽器識別不到。

例:大於 IE9 的瀏覽器使用這個單獨的 style9.css 樣式

1
2
3
例:只有 IE6 瀏覽器使用的 style6.css 樣式

1
2
3
四、其他特殊樣式

1.cursor 屬性的 hand 值和 pointer 值

問題:firefox 瀏覽器不支持 hand 值,但其他瀏覽器均支持 pointer 值。
解決: 統一使用 cursor 屬性的 pointer 值。

2.水平居中

問題:IE8 及IE8 以下版本瀏覽器不可通過設置 margin:0 auto 實現水平居中。

解決: 可通過設置父級 text-align:center 實現。

3.屬性值 「inherit」

問題:IE8 及IE8 以下版本瀏覽器不支持屬性值 「inherit」。

解決:謹慎使用屬性值 「inherit」。

五、JS兼容性

1.ES6語法

問題:IE11 不支持箭頭函數、class 語法等(報 SCRIPT1002: 語法錯誤),不支持 Set 和 Map 數據結構(不報錯)及 Promise 對象,支持 let 和 const,IE10 及以下不支持任何 ES6 語法。

解決:如果要兼容IE瀏覽器的項目請使用 ES5 語法或者使用 Babel 進行轉換。

2.操作 tr 標簽

問題:IE9 及 IE9 以下版本瀏覽器,不能操作 tr 標簽的 innerHTML 屬性。

解決:可以操作 td 標簽的 innerHTML 屬性。

3.Ajax

問題:IE9 及 IE9 以下版本瀏覽器無法使用 Ajax 獲取介面數據。

解決:在使用 Ajax 請求之前設置 jQuery.support.cors=true。

4.event 對象的 srcElement 屬性

問題:IE8 及 IE8 以下版本瀏覽器 event 對象只有 srcElement 屬性,沒有 target 屬性。

解決:obj = event.target?event.target:event.srcElement。

5.DOM 事件綁定

問題:IE8 及 IE8 以下版本瀏覽器是用 attachEvent() 方法,而其他瀏覽器是 addEventListener() 方法。

解決:判斷 IE 瀏覽器版本,如果是 IE8 及以下 事件綁定則使用 attachEvent() 方法,注意 attachEvent() 方法的用法,第一個參數為「onclick」 而不是「click」。並且沒有第三個參數。