今天在處理一個妙妙妙的問題. 在 IE 下看很正常, 但在 Firefox 下看就很怪.
是一個 flash 的網頁, 內容其實只是要佈滿版瀏覽器而已, 在 IE6, IE7 下沒問題, 但在 Firefox 下, 卻是寬滿版, 高則維持原 flash 的高度(sample 內的 swf 為320*240). 我們先來看看發生的狀況, 以下 sample 連結, 請查看:
http://sample.diary.tw/16/f1.html
原始檔內容如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <body> <embed height="100%" width="100%" src="f1.swf" type="application/x-flash" /> </body> </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 了, 如下:
html, body
{ margin: 0; padding: 0; height: 100%; border:none; }
就能有效解決 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 一樣囉!!