用 flash 做了一個全版面的網站
但在新版瀏覽器上面卻顯示不正常
這問題起因於在標準規格中不建議將高度設為100%
有沒有解決的方式呢?
一定有
今天試了幾種不同的方式
最後取消了 Dreamweaver 在 HTML 檔案第一行所寫的<!DOCTYPE;>宣告
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
問題解決了
不過客戶還是希望把宣告加回去
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
這樣寫是 OK 的
XHTML 1.0 跟 HTML 4.01 之間到底規格差別如何呢??
加了<!DOCTYPE;>宣告跟沒有加<!DOCTYPE;>宣告的差別又真的很重要嗎??
查了一下維基百科裡關於 XHTML 的說明以及關於 HTML 的說明
並沒有發現有相關的解釋
至於在 XHTML 1.0 下面實現 100% 高度的方法
在論壇上面求教高手後得到了解答
趕快記錄下來
CSS:
html, body, #fullContainer {
margin: 0;
padding: 0;
height:100%;
border: none;
text-align: center;
}
#fullContainer {
width:100%
text-align: left;
vertical-align: middle;
}
---------------------------------
HTML:
<body>
<div id="fullContainer">
This is centered
</div>
</body>
此程式碼是修改自 http://apptools.com/examples/tableheight.php
這樣可以在網頁中製造一個 100% 滿版且置中的效果
table tag 可以換成 div tag
但是 vertical-align: middle; 會失效
所以還是使用 table 比較完美
沒有留言:
張貼留言