fieldset的使用
由于工作需要在一个页面中展示多个像groupbox空间的框，由于以前从来没有使用过fieldset标签，本能的想到的是用DIV+span的方式来实现，但是这有个缺点，就是span的位置通过的是绝对定位的，不能根据groupbox里面的内容自动的调整，因此采用了fieldset来实现：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>GroupBox Demo</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"> </head> <body> <fieldset id="f_01"> <legend id="l_01">本单位上报情况</legend> <div id="outDiv_01"> <table id="tb_01"> <tr> <td>标题栏一</td> <td>标题栏二</td> </tr> <tr> <td>数据行--列一</td> <td>数据行--列二</td> </tr> <tr> <td>数据行--列一</td> <td>数据行--列二</td> </tr> </table> </div> </fieldset> <fieldset id="f_02"> <legend id="l_02">本单位上报情况</legend> <div id="outDiv_02"> <table id="ta_02"> <tr> <td>标题栏一</td> <td>标题栏二</td> </tr> <tr> <td>数据行--列一</td> <td>数据行--列二</td> </tr> <tr> <td>数据行--列一</td> <td>数据行--列二</td> </tr> </table> </div> </fieldset> <fieldset id="f_03"> <legend id="l_03">本单位上报情况</legend> <div id="outDiv_03"> <table id="tb_03"> <tr> <td>标题栏一</td> <td>标题栏二</td> </tr> <tr> <td>数据行--列一</td> <td>数据行--列二</td> </tr> <tr> <td>数据行--列一</td> <td>数据行--列二</td> </tr> </table> </div> </fieldset> </body></html>
如果根据这样的布局，来通过fieldset的id在相应的CSS文件中如下所示：
#f_01, #f_02, #f_03 {
margin:5px 10px 10px 10px;
}
table tr hover {
background-color:red;
cursor:hand;
}
则会出现：在table的tr中，鼠标滑过的时候，在IE6中，各个fieldset之间出现小幅的动，因此在后来改用Div来包裹fieldset，通过Div来设置相应的margin值
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>GroupBox Demo</title> <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"> </head> <body> <div id="oDiv_01> <fieldset id="f_01"> <legend id="l_01">本单位上报情况</legend> <div id="outDiv_01"> <table id="tb_01"> <tr> <td>标题栏一</td> <td>标题栏二</td> </tr> <tr> <td>数据行--列一</td> <td>数据行--列二</td> </tr> <tr> <td>数据行--列一</td> <td>数据行--列二</td> </tr> </table> </div> </fieldset> </div> <div id="oDiv_02> <fieldset id="f_02"> <legend id="l_02">本单位上报情况</legend> <div id="outDiv_02"> <table id="ta_02"> <tr> <td>标题栏一</td> <td>标题栏二</td> </tr> <tr> <td>数据行--列一</td> <td>数据行--列二</td> </tr> <tr> <td>数据行--列一</td> <td>数据行--列二</td> </tr> </table> </div> </fieldset> </div> <div id="oDiv_03> <fieldset id="f_03"> <legend id="l_03">本单位上报情况</legend> <div id="outDiv_03"> <table id="tb_03"> <tr> <td>标题栏一</td> <td>标题栏二</td> </tr> <tr> <td>数据行--列一</td> <td>数据行--列二</td> </tr> <tr> <td>数据行--列一</td> <td>数据行--列二</td> </tr> </table> </div> </fieldset> </div> </body></html>