5/15 08'
看到我把標題槓掉,就知道這又是一個以訛傳訛的消息!
之前有人在問 zoom 的功用,果然又是和雅虎佈落格有關係,據說,如果沒有加上 zoom:1 的話,filter:alpha(opacity) 會失效!
真正重點是:filter 濾鏡可以進行許多視覺化效果,不過 filter 效果多半只能套用在指定區塊中(例如指定寬及高),來看例子:
正常來說,效果應該是:
但這個例子在 IE 中的效果卻是:
加個 zoom:1 看看:
如果不加 zoom:1 改用 width:100% 看看:
所以,使用 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 的下場,看看這個例子:
結果如:
正常情況應是:
這裡強調一下,我用的字型是「微軟正黑體」,在 Vista 作業系統中是內建字型,只不過 IE7 並未內建指定使用微軟正黑體。這類圓滑字,一旦被 render 成 layout,下場就上圖所示!這時深底色就影響不大!
同意轉載,不過麻煩看一下轉載需知
Reila 2009/1/10 下午 01:54:00
你好!在透明度設定上ff和ie也顯示成功,但在ie留言時每打一個字,畫面就會跳動一次(在ff上沒問題)
請問是出現了什麼問題呢?