CSS实现文字压在边线上的效果，fieldset与legend

要达到以上的效果，我们可以在一个区域里用背景图片去做，其实在xhtml里有这样的标签可以去用。

插入代码：

<fieldset> 域（Defines a fieldset）
<legend> 域标题（Defines a title in a fieldset）

但是为了保证兼容性，实际操作起来并不是那么简单。页面代码：

插入代码：

<fieldset>
  <legend>dUcky的私生活</legend>
   <ul>
     <li>dUcky的私生活！新年快乐！</li>
     <li>dUcky的私生活！新年快乐！</li>
     <li>dUcky的私生活！新年快乐！</li>
     <li>dUcky的私生活！新年快乐！</li>
   </ul>
</fieldset>

通过样式定义

插入代码：

*{font-size:12px;margin:0;padding:0; font-family:Arial, Helvetica, sans-serif;}
fieldset{padding:10px;margin:10px;width:160px;color:#453739; border:#453739 solid 1px;}
legend{color:#933A34;font-weight:bold; background:#FFFFFF;}
ul{list-style-type: none;}
li{margin-top:4px;}

通过CSS，我们可以达到自己想要的效果。但是这里面有些问题：
1. 关于兼容性。我首先是把所有的padding和margin都设成0，因为IE和FF默认的都不一样。
2. 在IE6里，控制fieldset与上面容器的边距是用padding-top，而margin-top没有反应...在FF里是用margin-top。
3. 如果定义fieldset的边框的样式border，那么在IE6里边框会与legend里的文字重合叠加，而默认的样式不会。所以需要给legend一个背景挡住边框，这里是background:#FFFFFF。

总的来说，在FF中更好控制一点，虽然这样的标签用的不多，但是能比较快速的达到一些效果。但是看见有人说如果用fieldset来布局就不符合语义了，fieldset必须用在form标签里面。