页面布局 HTML 4.0 Transitional” VS XHTML 1.0 Transitional 新的不一定就好用！
前言
??????最近新的 XHTML??，用了一段時間感決雖然是新標準、不過感覺除了標簽等的寫法更嚴格了，最顯著的差別就是二者之間
頁面布局也有惡性的差異，尤其是對 Table 對象的布局方面，firefox，IE? 這里表現的是統一的。
??????也就是html 上面寫
??????<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
??????和
??????<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
會在很多方面有明顯的不同。
以下通過一個列子進行說明
???? 這個列子，主要布局使用的Table 對象，因為這個樣式的東西用Div 是無法實現的，因為我搞了一天、也沒成功，不管在那種html標準下
Div 都無法滿足要求，別的都好說，就是下圖中[2]的部分不用 js 沒法實現。
??? 圖一：設計要求100% 寬度頁面，要求最小支持 1024?x 768 ，主要支持 1280x1024，其余需求見圖上
?????????
上圖可以看出需求,
??????? 這種布局我用Div 搞了好久，如果不用 js 只用css 好像是做不來的、因為div 的 高度沒法設置為，類似 “剩余部分100%” 的這種、所以根本無法滿足需求，如果那位高人可以實現可以告訴我，我萬分感激。
還有網頁中用了一處，真彩色透明Png 就是那個大樓，看大樓下邊邊緣部分
和背景是融合的gif是不能達到這個效果的，ie7 以前不直接支持，Firefox 出來那天就支持了，ms 不知什么原因，ie7 才支持，不知道ms搞什么，有那么難嗎？
??? 為什么這么用Png24，顏色鮮艷，效果好有半透明功能，不過就是需要有特殊的樣式支持，ie5.5 以前就沒法支持了。
??? 而且省的用 Photoshop隔圖了，而且隔圖作固定布局的網頁還可以，有些時候ps隔的圖沒法做100%布局，而且隔圖的html太亂了，
?忙活半天終于搞出來了哎，還是用回了 table
?圖二：1280X1024 分辨率下 firefox 測試成功，布局正常
??????
? 圖三：最終測試符合要求，打完收工
還是不甘心啊，聽說 html,body {?height:100%;} 可以讓 XHTM 標準的網頁高度等于 100% 好看看，改 xhtml標準加樣式。
圖四：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 時的效果
靠上中下，三格竟然，平均分配大小！ 哎，還是改回 HTML 4.0 標準吧，HTML 4.0 下如果一個Table 上中下三個單元隔，上下都指定了高度
中間那個自動就會變為剩余部分的100%高、難道這樣是不對的嗎？也不知道 XHTML 標準怎么搞的。
以下是 html 代碼
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<title>無標題文檔</title>
<style?type="text/css">
<!--
html,body?{
????height:100%;
}
body?{
????margin-left:?0px;
????margin-top:?0px;
????margin-right:?0px;
????margin-bottom:?0px;
????background-image:?url(images/ltbg02.jpg);
????background-repeat:?repeat-x;
}
#header{
????height:?120px;
}
/*編輯區域，相對位置，要設置Z順序,否則可以被“大樓覆蓋”*/
#editBody
{
????position:?relative;
????z-index:9;
}
#middleLeft
{
????width:?365px;
}
/*草地背景*/
#footerBg
{
????background-image:?url(images/BlgDownBg.jpg);
????background-repeat:?repeat-x;
????background-position:?bottom;
????height:?150px;
}
/*
草地背景，中第一個Div用，
設置為相對位置，它里面的絕對定位樣式就是以它的0，0點開始的了
高度一定要給，要不在?FireFox?顯示不正常
*/
#footer{
????position:?relative;
????height:?149px;
}
/*大樓，樣式*/
#lefImg
{
????position:?absolute;
????left:?-2px;
????bottom:?30px;
}
/*小樓樓，樣式*/
#rimg
{
????position:?absolute;
????right:??20px;
????bottom:?150px;
}
#copyright{
????position:?absolute;
????right:?30px;
????bottom:?50px;
????color:?#FFFFFF;
}
.Test0?{
????border:?1px?solid?#FFFF00;
}
-->
</style>
<!--?如果小于等于ie6?-->
<!--[if?lte?IE?6]>
<style?type="text/css">
.pngAlpha?{
????height:?1px;
????width:?1px;
????filter:expression(
????????????????????????this.style.filter?=?this.style.filter.indexOf("AlphaImageLoader")==?-1???this.style.filter?+?"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"?+?this.src?+?"',?sizingmethod=image?)"?:?this.style.filter
????????????????????);
????
}
</style>
<![endif]-->
????
</head>
<body?>
<table?width="100%"?height="100%"?border="0"?cellspacing="0"?cellpadding="0">
??<tr>
????<td?colspan="2"?valign="middle"?id="header"?class="Test0"??> </td>????
??</tr>
??<tr>
????<td?id="middleLeft"?class="Test0"?> </td>
?????
????<td?valign="top"?id="middleRight"?>
????<div?id="editBody"?>
??????<p>測試</p>
??????<p>測試</p>
??????<p>測試</p>
??????<p><a?href="#">測試</a></p>
????</div>????
????</td>
??</tr>
??<tr??>
????<td?id="footerBg"?colspan="2"?valign="bottom"?class="Test0"?>
????????<!--注意，footer?樣式應用在?td?是有問題的，當中間的文字多的時候，圖片不會跟著走-->
????????<div?id="footer"?>????????????
????????????<img?id="lefImg"?src="images/home_t_01.png"?class="pngAlpha?Test0">
????????????<img?id="rimg"?src="images/home_t_02.gif"?class="Test0">
????????????<div?id="copyright"?class="Test0"?>版權：曲濱?2006?，Emai:XXXXXX</div>
????????</div>
????</td>???
??</tr>
</table>
</body>
</html>
說明一下，上面那個是專門給 ie6，ie5.5 準備的顯示24色透明png 的樣式腳本，我以前寫的用了2年了。用了ie 的預編譯，其他瀏覽器
自然就忽略了。
<!--[if lte IE 6]>
<style type="text/css">
.pngAlpha {
?height: 1px;
?width: 1px;
?filter:expression(
??????this.style.filter = this.style.filter.indexOf("AlphaImageLoader")== -1 ? this.style.filter + "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingmethod=image )" : this.style.filter
?????);
?
}
</style>
<![endif]-->
如果那位園友，作類似的布局的話能少浪費點時間
還有誰可以在不用腳本的情況下，滿足需求做出 div 布局的本類網頁，請通知我，我的郵件在我blog 的頭圖上
這里下一個戰書，給那些說 div 如何如何 nb 的園友，不是挑釁啊事先聲明,子是爭論一下技術而已 ^_^。
網頁及圖片下載
圖片被處理了因為不都是我一個人設計的，我沒權利放在包里抱歉。
總結
以上是生活随笔為你收集整理的页面布局 HTML 4.0 Transitional” VS XHTML 1.0 Transitional 新的不一定就好用！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 浅读：ITSM信息技术服务管理
- 下一篇： AJAX 在中文社区的“集体信仰动摇”？