2006年6月18日

几天前，写了一个tab control ，风格如下：

我使用了css来描述这个风格，html和css代码如下：

 <ul>
<li><a href="#" class="selected">文件</a></li>
<li><a href="#">编辑</a></li>
<li><a href="#">视图</a></li>
<li><a href="#">站点</a></li>
<li><a href="#">编译</a></li>
<li><a href="#">工具</a></li>
</ul>

ul
{
border-bottom:solid 1px #999999;
border-left:solid 1px #999999;
height:30px;
width:100%;
margin-left:0px;
}
li
{
border-top:solid 1px #999999;
border-bottom:solid 0px #999999;
border-left:solid 1px #999999;
border-right:solid 1px #999999;
background-color:#cccccc;
width:100px;
height:30px;
display:inline;
list-style-type:none;
margin-left:-1px;
margin-bottom:-2px;
text-align:center;
padding-top:10px;
}
.selected
{border-top:solid 1px #999999;
border-bottom:solid 0px #999999;
border-left:solid 1px #999999;
border-right:solid 1px #999999;
background-color:#eaeaea;
width:100px;
height:30px;
display:inline;
list-style-type:none;
margin-left:-1px;
margin-bottom:-2px;
text-align:center;
padding-top:10px;
}

在一个master page上使用没有任何问题。下午，在将这个tab control 拖到一个vs2005生成的页面上，运行的时候，发现效果竟然变成这个样子：

同样一段代码，同样的浏览器，怎么会出现不同的效果？ 仔细检查后，发现原来在master page里之所以正常是因为master page使用的是html4.0，而现在的新的页面是使用xhtml1.0来定义，难道是由于xhtml的严格定义要求引起的？ 赶快去w3c以及其他资源网站查资料，最后终于发现根本的原因。

原来，以前的写法一直都是错误的。由于默认情况下，“li” 元素一直是竖直排列的，所以，我就使用了 display:inline 强制让它在行的方向排列，以达到我想要的效果，但是，在xhtml里，这种不严谨的写法是不被支持的，所以，这里设置高度、宽度都没有任何作用。在格式化xhtml标签时，更加强化了 “box”的概念，要想使用一些margin,padding等填充效果，就必须先将元素转变成 box 元素，然后就可以设置想要的效果了。那么，如何将一个元素转变成 box 元素？ 答案是: 可以使用 float:left/right 的方式来把元素漂浮起来，变成一个个的box，这样就可以任意使用 box 元素支持的css属性了。

基于以上的思路，我将上面css里的display:inline修改掉，变成float:left，一切都ok了！

以上只是一个特例，在html4.0转到xhtml的过程中，会有不少的css效果都会发生转变，不过，这种转变是有规律和准则的，只要掌握了这种思想，应该能解决大部分问题。