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標籤裡面。