問題描述

我正在尋找一些替代方法：

<iframe transparency=true   ...

當我做 W3C 驗證時，我得到錯誤：

Column 31: there is no attribute "allowtransparency"

如果使用這個 CSS，

.iframe-trans-fix{
   opacity: 0;
   filter:alpha(opacity=0);
}

對於上面的代碼段，我得到一個空白的 iframe 。

最佳解決思路

雖然 W3C 的 HTML 規範沒有定義它，但是它有一個 allowTransparency 屬性，所有現代瀏覽器 (和 Internet Explorer) 都支持它。正如 HTML5 教過我們的，車應該在馬之前。

假設你的主頁上有這個 HTML，index.html：

<html>
    <body>
        <iframe src="source.html" 
                allowTransparency="true" 
                style="background-color:lightgreen;" 
                width="400" height="200">
        </iframe>
    </body>
</html>

你的 source.html 看起來像這樣：

<html>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, magna
           id bibendum sollicitudin, tellus tortor consequat enim, et mollis mauris 
           augue et dui. </p>
    </body>
</html>

當您在瀏覽器中打開主頁面 (index.html) 時，您將在 iframe 中看到 source.html 中的文本，但它將具有淺綠色背景。

(在 Mac OS X 和 Internet Explorer 8 上使用 Safari，Firefox 和 Chrome 測試，Windows XP 上的 Chrome)

編輯：關鍵是：源頁面不能設置自己的背景。如果是，它會忽略透明背景。

次佳解決思路

我不知道你在這裏做什麼，但這應該是你正在尋找的：

iframe {
    background-color: transparent;
}

這當然是假設你想要 iframe 的背景是透明的。

第三種解決思路

有一種方法可以使用 jQuery，如果你已經包括了 jQuery 文件 – 

<!--[if lt IE 9]><script> $(".classname").attr("allowTransparency", "true"); </script><![endif]-->

將.classname 更改為您的 iframe 的名稱，或者如果沒有，請將其更改為。 (從 iframe 中取出屬性) 在 iframe 關閉標記之後，將它放在 IE9 之前的瀏覽器中添加所需的 allowTransparency 標籤。因為它是在 IE 條件語句內，它不會被 W3C 驗證器讀取。它還消除了跨瀏覽器兼容性和內容隱藏問題，添加了所有已經提到的 CSS，如果您仍然使用最新的 jQuery 版本。 allowTransparency 屬性是以明確定義的目的創建的，因此當您只需靜默插入時，就無需嘗試使用 CSS 重新創建它。希望這有助於某人！

(此方法假定您已經有 iframe {background-color:transparent}，它不適用於較舊的 IE 版本)

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。