西门的后花园

一个热爱网络的年轻人的博客

IE6/7里div加左边距对里面textarea的影响

今天上午接到一个小需求修改,只是把原来不固定的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也有这个问题,大家可以试试。

评论列表

  1. 额,现在变成了一月一篇哦,呵呵~

  2. 好像已经没有沙发了,那就不沙发了。 💡 我只是路过来看看的。

  3. <b> 什么时候开始卖主机的? </b>

  4. 只要专业人士才搞这个啊,像我连IE都懒得管了。。更别提IE6 7了,佩服和IE6滚床单的人哈。

  5. 经验之谈啊,mark一下。
    PS:楼主的更新频率有点低啊

  6. margin用烂了,很多时候padding更合适些。

  7. 西门你更新了,~ 😆

  8. 一直说要尝试做一个div的网站的,到现在还在学习过程中。

  9. 现在的浏览器标准都不统一,写CSS往往要兼顾多个浏览器,麻烦的很!

  10. 一直纠结IE6的前端伤不起啊,哈哈!

  11. 这就是经验。

  12. 博主主题很不错哟

  13. ❗ 西门也开始折腾css了啊 哈哈哈

  14. 现在都用IE8了吧

  15. 文章广告影响图片显示

  16. 很久没过来了,今天过来看看!

  17. 纯技术贴啊 😕

  18. 好久才看到一篇更新

  19. 博主搞前端开发的?细心人啊

  20. 这才是学习啊。有问题解决、记录。

  21. IE6/7连div都这么差

  22. 聚焦textarea 光标不在开始位置怎么办?

发表评论

分类目录