页面布局 "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 的园友，不是挑衅啊事先声明,子是争论一下技术而已 ^_^。
网页及图片下载
图片被处理了因为不都是我一个人设计的，我没权利放在包里抱歉。
