pCloud Partner Program

'height'相關日誌共 1 篇

  1. 2009/01/23 詭異的dtd (flash滿版問題) (1)

詭異的dtd (flash滿版問題)

程式技術 2009/01/23 15:26
views: 87690 times
今天在處理一個妙妙妙的問題. 在 IE 下看很正常, 但在 Firefox 下看就很怪.

是一個 flash 的網頁, 內容其實只是要佈滿版瀏覽器而已, 在 IE6, IE7 下沒問題, 但在 Firefox 下, 卻是寬滿版, 高則維持原 flash 的高度(sample 內的 swf 為320*240). 我們先來看看發生的狀況, 以下 sample 連結, 請查看:

http://sample.diary.tw/16/f1.html

原始檔內容如下:


用 IE 看和用 Firefox 看結果不同:
用戶插入圖片
用戶插入圖片
真是奇怪咧, 後來經檢查發現, 是和原始碼的第一行有關, 若使用了 xhtml 的 dtd 後, 就會發生這個狀況, 當把 dtd 移除後, 無論是 IE 或是 Firefox 就都可以滿版了, 可以參考這個範例連結:

http://sample.diary.tw/16/f2.html


但遵守 xhtml 是未來必經之路, 不能說拿掉就拿掉吧, 再來找看看有沒有好用的 solution, 於找到了這篇: TIPS-Get 100% Height in XHTML

裡面建議了一個蠻不錯的好方法, 就是將 html 及 body 的高度都利用 css 指定 100% 設起來後, 就可以有全高的 flash 了, 如下:


就能有效解決 dtd 存在的 xhtml 時, 無法滿版的問題, 重點在於 html 及 body 的 height: 100% 這件事上, 請參考範例連結:

http://sample.diary.tw/16/f3.html

而其中的 margin:0; padding:0; 是將 box model 中的邊界及位移都設為0 , 更接近滿版的狀況囉, 到此終於解決了一個詭異的 html 滿版問題了.(當然 flash 只是其中做為應用的一種啦, 其他的 html tag 也都是一樣的意思, 滿版都有這些狀況, 只是 flash 較常碰到了)

PS. 補充一下, 剛好手邊也有 IE8 , 他的狀況和之前的 IE6, IE7 不同, 由於更支援正式的規範, 反而它的行為是和 Firefox 一致哦, 不過若是切到 IE8 的 compatible view 時, 就會和 IE7, IE6 一樣囉!!

top




Nextbit Robin 5.2吋六核心智慧型手機 Microsoft Office 365 中文家用版PKC (無光碟)
ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U 美國 VORNADO 533 渦流空氣循環機 (黑色)
御茶園 每朝健康綠茶(650mlx24入) 每朝健康 雙纖綠茶(650mlx24入)


 Waiting...