fieldset在ie8下的margin\padding bug規避


寫在前面的話                                                                                                                                                       

其實我不推薦使用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的表現

2012-03-05_1434032012-03-05_1436122012-03-05_143802

fieldset padding 測試                                                                                                                                         

添加padding:20px; ie8出現了異常情況!(padding的作用位置不同,詳見文章后的評論,呵呵)

2012-03-05_1442252012-03-05_144343

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>

2012-03-05_145659

 

最后建議:不要使用標簽fieldset了


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM