6個簡單的解決方案解決Internet Explorer中的透明度問題

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

在Internet Explorer中的透明度始終是一個所有Web設計者的大問題。設計網頁的時候要考慮的IE6的相容性問題。，我們設計的網站要在firefox/opera/chrome下調試，最後還要在IE中測試相容性問題

關於IE6的一個主要問題是透明度問題。IE6無法正確呈現透明的 PNG映像。結果是你設計的網站在其他瀏覽器當可以顯示，放在IE6下面就亂了，哈哈，幸運的是，有幾個解決方案，它可以協助網頁設計師克服IE6的透明度問題。他們每個人都使用不同的方法。今天，我就將簡要看看這些方法奉獻給大家，你看看你考慮用哪種方法，以後如果在遇到類似的問題，你不要去說上百度搜，怎麼樣解決，只要你把這篇文章記下來，以後任何的透明度問題，都保證全部解決

1。jQuery.pngFix.js

此解決方案要求jQuery和css背景一起作用。要使用此方法，簡單的添加jQuery的在你的頭部和pngFix外掛程式，然後啟用js函數。這個外掛程式將修複在Windows Internet Explorer 5.5及6失蹤的PNG透明度問題，使用方法

1.在頭部引用檔案

1 <head> 
2 ... 
3 <script type="text/javascript" src="jquery-latest.pack.js"></script> 
4 <script type="text/javascript" src="jquery.pngFix.js"></script> 
5 ... 
6 </head>

2，啟用這個方法

1 <head> 
2 ... 
3 <script type="text/javascript"> 
4     $(document).ready(function(){ 
5         $(document).pngFix(); 
6     }); 
7 </script> 
8 ... 
9 </head>

2。DD_belatedPNG

DD_belatedPNG youe IE6/PNG問題是另一個JavaScript解決方案。為了使用此解決方案，只需將它添加到您的文檔，調用的CSS選取器的DD_belatedPNG.fix togother屬性。

1 <!--[如果IE 6]> 
2 <script src="DD_belatedPNG.js"> </ SCRIPT> 
3 <SCRIPT> 
4   / *樣本* / 
5   DD_belatedPNG.fix（'.png_bg'）;   / *字串參數可以是任何CSS選取器*   / / *。png_bg的例子是不必要的*   / / *將其更改為適合你 ！* / </ SCRIPT> <[ENDIF] - >
6

3。TwinHelix IE PNG修複
TwinHelix的解決方案需要使用CSS屬性的行為。您需要上傳檔案包中的“iepngfix.htc”和“blank.gif”檔案即可

4。IE7.js

IE7.js是一個JavaScript庫，Microsoft Internet Explorer的行為像一個符合標準的瀏覽器。它修複了許多HTML和CSS問題，IE5和IE6下透明PNG正常工作。

在ie7中代碼是

1 <!--[if lt IE 7]>
2 <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
3 <![endif]-->

在IE8中的代碼是

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

在IE9 中的代碼是

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

5。Unit PNG Fix

UnitPNG的Hotfix寫上代碼自動運行，確保所有的PNG透明，並且他不與背景重複

6，在Windows IE的PNG

只需3行代碼，你會得到你所有的PNG檔案的透明度。代碼打包下載

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More