fieldset在ie8下的margin\padding bug规避
寫在前面的話???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
其實我不推薦使用fieldset這個標(biāo)簽，正如我們常常議論的那樣這東西在不同的瀏覽器下確實操蛋，但是在一些老的項目中大量使用，所以還是有必要分析一下，fieldset到底有哪些怪毛病，如何規(guī)避！我承認(rèn)我閑的蛋疼，不喜請繞路！
fieldset margin 測試?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
環(huán)境說明：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的表現(xiàn)
fieldset padding 測試?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
添加padding:20px; ie8出現(xiàn)了異常情況！(padding的作用位置不同，詳見文章后的評論，呵呵)
fieldset bug 解決方案?????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
這里沒有最好的解決方案，只是規(guī)避方案（最佳實踐是不用這個標(biāo)簽）。盡量不在fileset標(biāo)簽上使用margin\padding的樣式，應(yīng)交由fieldset的包裹元素和內(nèi)含元素的margin來間接實現(xiàn)
注：為啥說到margin呢，因為在低版本的ie上fieldset的margin也是存在bug的，我們今天討論的bug在ie9中均已修復(fù)。
<!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>?
最后建議：不要使用標(biāo)簽fieldset了
轉(zhuǎn)載于:https://www.cnblogs.com/shishm/archive/2012/03/05/2380509.html
總結(jié)
以上是生活随笔為你收集整理的fieldset在ie8下的margin\padding bug规避的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《深入Python》-11. HTTP
- 下一篇： 一小段代码：父类和子类