首頁    文章清單    RSS

IE 透明度失效和 zoom:1 有關？

5/15 08'

看到我把標題槓掉，就知道這又是一個以訛傳訛的消息！

之前有人在問 zoom 的功用，果然又是和雅虎佈落格有關係，據說，如果沒有加上 zoom:1 的話，filter:alpha(opacity) 會失效！

真正重點是：filter 濾鏡可以進行許多視覺化效果，不過 filter 效果多半只能套用在指定區塊中（例如指定寬及高），來看例子：

<p style="color:#FFF;background:#066;filter:alpha(opacity=50);">使用 filter 透明度效果</p>

正常來說，效果應該是：

但這個例子在 IE 中的效果卻是：

加個 zoom:1 看看：

<p style="zoom:1;color:#FFF;background:#066;filter:alpha(opacity=50);">使用 filter 透明度效果</p>

如果不加 zoom:1 改用 width:100% 看看：

<p style="width:100%;color:#FFF;background:#066;filter:alpha(opacity=50);">使用 filter 透明度效果</p>

所以，使用 zoom:1 或 width:100% 對 IE「啟用」filter 都有效，主要原因是在於 filter 套用到物件上時，物件必需是「有形體」，再講簡單點，必需「明確知道套用範圍」，這在 IE 中稱為 layout，同時 IE 支援 hasLayout 這個屬性，妙的地方是 hasLayout 這個屬性沒 HTML 寫法，也就是只能使用 JavaScript / JScript 來驅動，使這個屬性變成啟動或不啟動。當 hasLayout 為 true 時，filter 的效果才能產生。

雖然 hasLayout 並沒有 HTML 語法可以驅動，不過某些 CSS 屬性一旦被指定，hasLayout 自動調整為 true，這些 CSS 屬性是：

屬性名稱	啟動 hasLayout 的值	取消　hasLayout
display	inline-block
width / height	除了 auto 外任何值	auto
position	absolute	static
float	left 或 right	none
zoom	有就好	normal 或空值

所以，zoom:1 只是用來驅動 hasLayout 屬性的一種方法而已，那重點來了，使用 filter 的下場，看看這個例子：

<p><span style="zoom:1;filter:alpha(opacity=100);font-size:15px;">使用 filter 前，要把物件 render 成 layout</span> <br/> <span style="zoom:1;filter:alpha(opacity=100);font-size:15px;color:#FFF;background:#2E3139;">使用 filter 前，要把物件 render 成 layout</span></p>

結果如：

正常情況應是：

這裡強調一下，我用的字型是「微軟正黑體」，在 Vista 作業系統中是內建字型，只不過 IE7 並未內建指定使用微軟正黑體。這類圓滑字，一旦被 render 成 layout，下場就上圖所示！這時深底色就影響不大！

 

以下為文章回應區

同意轉載，不過麻煩看一下轉載需知

Reila   2009/1/10 下午 01:54:00

你好！在透明度設定上ff和ie也顯示成功，但在ie留言時每打一個字，畫面就會跳動一次（在ff上沒問題）
請問是出現了什麼問題呢？

給個回應

姓名:
佈落格網址:
	如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容:

Copyright 2006-2007 audi.tw