主机格调

今天上午接到一个小需求修改,只是把原来不固定的div加个固定宽,没想到遇上一个IE6/7的BUG,搞了2个多小时,收获不小,做个记录。

结构简单说就是外面有2个div,里面是个textarea,2个div均有左边距。但如果里面的div加宽度,在IE6/7里,textarea莫名的就加了个左边距。如下截图:

BUG

百思(试)不得其解后,果断问同事。同事说没遇见过这种情况,我就开始写DEMO。因为当时只考虑到一个div,但一样出现此BUG,当时还用display:inline-block解决了(奇怪是在家里再次写这个DEMO时,居然无效)。后放到项目里,不行。之后搜索,运气好,搜到2篇同样问题的文章,感谢作者!

http://alivoa.iteye.com/blog/671292

http://www.ipmtea.net/css_ie_firefox/201111/06_778.html

最终我选择了在textarea外面加了个div的方法来解决此问题。当然,回家后把这个问题重新整理了一下,也罗列出4种不同的解决方案,希望对大家有帮助。

DEMO

DEMO里有简单的描述,相信大家查看源代码就知道吧。不会查看源代码的前端不是好前端哦!

对input也有这个问题,大家可以试试。

>>原创文章,欢迎转载。转载请注明:转载自西门的后花园,谢谢!
>>原文链接地址:http://ons.me/418.html