寫在前面的話
其實我不推薦使用fieldset這個標簽,正如我們常常議論的那樣這東西在不同的瀏覽器下確實操蛋,但是在一些老的項目中大量使用,所以還是有必要分析一下,fieldset到底有哪些怪毛病,如何規避!我承認我閑的蛋疼,不喜請繞路!
fieldset margin 測試
環境說明:win7 + ie 8.0 +chrome 16.0 +firefox 10
<!DOCTYPE HTML>
<html>
<body>
<fieldset style="margin:100px auto;width:600px;height:100px">
<legend>測試表單</legend>
<form>
<label>測試1:<input type="text" /></label>
<label>測試2:<input type="text" /></label>
</form>
</fieldset>
</body>
</html>
首先測試fieldset在不同瀏覽器下margin的表現
fieldset padding 測試
添加padding:20px; ie8出現了異常情況!(padding的作用位置不同,詳見文章后的評論,呵呵)
fieldset bug 解決方案
這里沒有最好的解決方案,只是規避方案(最佳實踐是不用這個標簽)。盡量不在fileset標簽上使用margin\padding的樣式,應交由fieldset的包裹元素和內含元素的margin來間接實現
注:為啥說到margin呢,因為在低版本的ie上fieldset的margin也是存在bug的,我們今天討論的bug在ie9中均已修復。
<!DOCTYPE HTML>
<html>
<body>
<fieldset style="margin:100px auto;width:600px;height:100px">
<legend>測試表單</legend>
<div style="margin:20px">
<form>
<label>測試1:<input type="text" /></label>
<label>測試2:<input type="text" /></label>
</form>
</div>
</fieldset>
</body>
</html>
最后建議:不要使用標簽fieldset了