您現在的位置是:電腦技術吧?>? 基礎知識 ??>??關于ie瀏覽器的功能,ie瀏覽器的功能??>??正文詳情

關于ie瀏覽器的功能,ie瀏覽器的功能

道詩槐2019-12-24 09:02:39 人圍觀
簡介x瀏覽器本文總結了IE瀏覽器中PNG問題的解決方法。很實用。如果需要的話你可以參考一下。目前,互聯網對網頁效果的要求越來越高,因此使用PNG圖片勢在必行。PNG分為幾種瀏覽器是啥

本文給大家匯總了一下png在IE瀏覽器下出現的各種問題的解決方法,十分的實用,有需要的小伙伴可以參考下。

  目前互聯網對于網頁效果要求越來越高,不可避免的用到PNG圖片,PNG分為幾種格 式,PNG8 PNG24 PNG32,其中最常用的,也是顯示效果和大小比較適中的則是PNG24,支持半透明,透明,顏色也非常豐富,但由于咱們國人使用IE系列或以IE為內核系列的瀏覽器占大多數,并且由于 WINDOWS XP在國內市場份額比較大,并且XP上好多人還在用IE6 IE7 IE8等瀏覽器,而這些瀏覽器對于PNG支持或多或少都有差距,IE6完全不支持PNG,IE7 IE8支持PNG不完全,在IE7 IE8下面對圖片改變透明圖的時候,延PNG透明區域的地方會有一條黑色的邊框,如果有半透明的,則整個半透明區域都是黑色,這點對于要求美觀的頁面是不能接受的,研究了下,發現把PNG當背景,用微軟特有的濾鏡加載圖片,可以解決IE6不支持PNG的問題,并且也可以解決IE7和IE8下面使用JQUERY動畫透明效果時出現黑邊的問題,有代碼有真像,如下:  ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 script function correctPNG() { var arVersion = navigator.appVersion.split(MSIE) var version = parseFloat(arVersion[1]) if ((version = 5.5) (document.body.filters)) { var lee_i = 0; var docimgs=document.images; for (var j = 0; j docimgs.length; j ) { var img = docimgs[j] var imgName = img.src.toUpperCase(); if (imgName.substring(imgName.length - 3, imgName.length) == PNG !img.getAttribute(usemap)) { lee_i ; var SpanID = img.id || 'ra_png_' lee_i.toString(); var imgData = new Image(); imgData.proData = SpanID; imgData.onload = function () { $(# this.proData).css(width, this.width px).css(height, this.height px); } imgData.src = img.src; var imgID = id=' SpanID ' ; var imgClass = (img.className) ? class=' img.className ' : var imgTitle = (img.title) ? title=' img.title ' : title=' img.alt ' var imgStyle = display:inline-block; img.style.cssText if (img.align == left) imgStyle = float:left; imgStyle if (img.align == right) imgStyle = float:right; imgStyle if (img.parentElement.href) imgStyle = cursor:hand; imgStyle var strNewHTML = span imgID imgClass imgTitle style= width: img.width px; height: img.height px; imgStyle ; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src=' img.src ', sizingMethod='scale');/span img.outerHTML = strNewHTML; j = j - 1; } } } } //判斷是否為IE8及以下瀏覽器,其實除了這三個瀏覽器不支持addEventListener,其它瀏覽器都沒問題 if (typeof window.addEventListener == undefined typeof document.getElementsByClassName == undefined) { window.attachEvent(onload, correctPNG); } /script   在頁面的/body的結束標記之前先引用jquery1.8類庫,再加入以上代碼,IE6 7 8 顯示PNG24都沒有問題了,如果需要執行animate動畫或獲取圖片時,發現在ie 6 7 8下找不到PNG圖片了,或找到了改變其位置和透明圖沒有反應,這原因是correctPNG將頁面上所有的PNG的IMG標簽都替換成了SPAN標簽,然后在SPAN標簽上使用filter: progid:DXImageTransform.Microsoft.AlphaImageLoader 將PNG圖片加載進來,所以,建議做法是在將圖片用DIV包括起來,此DIV中只允許有一個IMG標簽,然后對DIV進行位置或透明度的相關操作,例:  ? 1 2 3 4 div id='test'img src='xxxx.png'//div script $(#test).animate({opacity:0.2,marginLeft:500},1000,function(){alert('run complete');}); /script   還有一種情況是,我對這個圖片除了要做透明和位移,還要改變其寬度和高度,對于這種情況,我建議采用以下方法:  ? 1 2 3 4 div id='test'img src='xxxx.png'//div script $($(#test span)[0]||$(#test img)[0]).animate({opacity:0.2,marginLeft:500,width:'500px',height:'500px'},1000,function(){alert('run complete');}); /script   BUG:在IE7和IE8下如果你動態修改png圖片的透明度,比如說你應用一個fadeIn,將圖片的透明度調到25%,這時候就會出現非常詭異的bug,png的透明信息沒了!變成了非常難看的黑色!  IE7和IE8下png圖片背景變黑的bug解決方案:  1、不要直接改變圖片的透明度,而是給圖片套個容器,去修改這個容器的透明度  比如原代碼是:

  修改成:

  2、給這個容器加個背景顏色  非常重要,解決bug的關鍵就在這一步,比如:  ? 1 2 3 4 5 6 7 .share-list-icon-shadow{ width:60px;height:21px; position:absolute;bottom:8px;left:0px;z-index: 1; margin: 0 auto; display:block; background:#FAFDEF; }   一般情況下,到此bug就解決了,如果還是有問題,請看下面:  3、給容器加個zoom: 1  zoom: 1起到什么作用呢?為什么IE會存在這個bug呢?  這是二個問題,其實是一個答案。

IE修改透明度,不是通過css屬性,而是通過filter濾鏡,所以想要理解這個bug,就要從filter濾鏡上找原因。

filter作用于一個對象時,這個對象必須是有形體,也就是必須是layout,而IE存在一個很特殊的屬性:hasLayout ,這個屬性可以賦予容器成layout,hasLayout這個屬性有些詭異,你無法通過直接寫css啟動,而必須通過javascript啟動,其實還有一種方法可以啟動,就是使用特殊的css屬性,變相將hasLayout啟動,這個css屬性就是 zoom (其他的屬性比如display:inline-block、float:left等也行,而只有zoom沒什么副作用)  以上所述就是本文的全部內容了,希望大家能夠喜歡。

版權聲明:本文由 道詩槐 整理編輯。

原標題:ie瀏覽器能實現的功能,什么是ie瀏覽器

轉載注明出處:http://www.dn9ww09s.icu/basics/15659.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • walkthroughs,walkthroughfire

    walkthroughs,walkthroughfire 相關圖片女巫walkthrough本文主要介紹了利用jQuery插件pagewalkthrough實現向導頁效果的方法和示例代碼,非常詳細和實用。如果需要的話你可以參考一下。現在很多網站不僅介紹walkthrough游戲攻略...

  • 多級下拉菜單怎么做,多級下拉菜單wps

    多級下拉菜單怎么做,多級下拉菜單wps 相關圖片表格二級下拉菜單本文主要介紹由JavaScript控制的多級下拉菜單,包括示例代碼,非常好,這里推薦使用。我最近不舒服,所以不能按計劃更新。對不起的。這里直接粘貼代碼,如果有不...

  • ios是誰開發的,ios用什么開發

    ios是誰開發的,ios用什么開發 相關圖片ios開發難嗎在redmonk發布的2015年1月編程語言排名中,Swift的采用率從68飆升至22,Objective-C仍然排名前10,而JavaScript憑借其在IOios 開發教程...

  • ios開發者預覽版,ios開發者選項

    ios開發者預覽版,ios開發者選項 相關圖片android 培訓資料我從事IOS應用程序開發已經五年了,我當時一直在努力避免與Android打交道,但現在不同了。不管你信不信,Android開發實際上很有趣,與IOS開發沒有你想怎么學好android...

  • 匿名聊天室,一對一聊天室

    匿名聊天室,一對一聊天室 相關圖片qq聊天室聊天室技術-實現秘密通話每個聊天室提供秘密通話功能,為需要私下交流的人提供便利。以下是在我的聊天室實現私人聊天的方法:1。處理發送信息的每一句話都應該顯示在我...

  • android圖片壓縮,android中圖片壓縮

    android圖片壓縮,android中圖片壓縮 相關圖片安卓手機圖片壓縮工具本文主要介紹了Android系統中三種圖像壓縮處理方法,闡述了質量壓縮、縮略圖獲取和圖像縮放三種方法,并給出了相應的示例代碼。你可以在Android中為你的朋友安...

  • 局域網怎么連接,怎么連接局域網電腦

    局域網怎么連接,怎么連接局域網電腦 相關圖片公司內網怎么連接摘要:在企業局域網中,MDB通常通過ODBC連接SQL Server數據庫。本文詳細介紹了如何通過ODBC連接SQL Server數據庫,達到局域網軟件應用的目組建局域網...

  • sql的存儲過程,存儲過程是sql嗎

    sql的存儲過程,存儲過程是sql嗎 相關圖片mysql的存儲過程transact-SQL中的存儲過程與Java語言中的方法非常相似。它可以重復調用。存儲過程執行一次后,可以緩存該語句,以便下次執行時直接使用緩存中的語句。這提sql編譯存儲...

  • mysql主從配置,redis主從配置

    mysql主從配置,redis主從配置 相關圖片主從復制是什么MySQL支持單向和異步復制,其中一個服務器充當主服務器,一個或多個其他服務器充當從服務器。主服務器將更新寫入二進制日志文件,并維護日志文件的索引以跟蹤日志...

  • 遠程監聽器能監聽多遠,無線監聽器監聽多遠

    遠程監聽器能監聽多遠,無線監聽器監聽多遠 相關圖片遠程手機竊監聽器專賣很多人都知道,Oracle的偵聽器中總是存在安全風險。如果未設置安全措施,則可以訪問它的用戶可以遠程關閉偵聽器。相關示例:D:lsnrctl stop eygl手機竊監聽器專賣...

熱評文章

  • 廣告實例,問題式廣告案例

    廣告實例,問題式廣告案例 相關圖片怎么做廣告分析本文的例子描述了用JavaScript實現廣告的關閉和顯示效果。與您分享以供參考。具體實現方法如下:JS代碼部分如下:?12345678910121314151有問題的廣告案例...

  • tab上面那個鍵叫什么,tab是鍵盤哪個鍵

    tab上面那個鍵叫什么,tab是鍵盤哪個鍵 相關圖片電腦tab鍵在哪本文的示例描述了JavaScript如何使textarea支持tab鍵。與您分享以供參考。具體實現方法如下:?1234567891013141516171819win鍵加tab...

  • html驗證碼代碼,登錄界面的驗證碼代碼

    html驗證碼代碼,登錄界面的驗證碼代碼 相關圖片驗證碼源代碼本文介紹了一個用java代碼生成隨機圖片驗證碼的例子,可以直接配置成servlet,直接調用java代碼生成圖片驗證碼包com.rchm.util.images驗證碼怎么輸入才正確...

  • 怎么更換字體樣式,怎么換字體樣式

    怎么更換字體樣式,怎么換字體樣式 相關圖片word怎么更改樣式本文的示例描述了每天在JavaScript中定期更改皮膚樣式的方法。與您分享以供參考。具體分析如下:該JS代碼每天都會在不同的時間段自動改變web頁面調用的樣式word沒有更...

  • easyui datebox,easyui datagrid

    easyui datebox,easyui datagrid 相關圖片easyui的只讀屬性本文主要介紹了jquery.easyui中日期框時間的格式化方法。你可以為你的朋友參考下面的方法。這里沒有太多的廢話,代碼是直接呈現的:?123456美元。新生easyui什么時候該...

  • 文件上傳實現,html實現文件上傳

    文件上傳實現,html實現文件上傳 相關圖片jsp文件上傳本文介紹了使用jQuery使用HTML5的formdata屬性上傳文件的方法和示例。這是非常實際的,可以參考所需的合作伙伴。一。使用jQuery通過HTML5的axios 文件上傳...

  • 4大作用域,類的作用域

    4大作用域,類的作用域 相關圖片jsp作用域使用本文主要介紹了有關安古拉耶斯范圍的相關資料。請參閱“123456789101213141516171819202122!DOCTYPE HTMLHTML ng Java作用域...

  • input的name屬性,input標簽value

    input的name屬性,input標簽value 相關圖片input傳值這個例子展示了JavaScript如何獲取和更改輸入標記的name屬性。與您分享以供參考。具體實現方法如下:?12345678910121314151617輸入自定義標簽屬性...

  • 對象比較大小,相對大小的對象

    對象比較大小,相對大小的對象 相關圖片cdr對象大小本文演示了JavaScript如何獲得指定對象的大小。與您分享以供參考。具體如下:?1234567891011用于驗證設置對象格式里面的大小...

  • mac卸載軟件,mac safari打不開

    mac卸載軟件,mac safari打不開 相關圖片mac突然黑屏本文的示例描述了jQuery根據用戶的計算機是MAC還是PC加載相應樣式的方法,與您分享,以供參考。具體實現方法如下:?12345if(導航器。用戶代理。Indmac電腦黑屏怎么辦...

關注微信

变脸官网查询