Founds on IE

Author : lovecicy

发现ie下获取窗口离文档开头的距离不能使用document.body.scrollTop,这会一直返回0,而需要使用document.documentElement.scrollTop才能正确地获取.

在使用jQuery时,发现在IE8下用$(‘html,body’).scrollTop()会一直返回0,还成$(docuemnt).scrollTop()就能正常获取了。

最近使用了tokeninput这个jQuery插件来完成类似qq邮箱收件人编辑框的功能,但是在ie下使用发现有颇多问题。

第一个就是,ie的渲染问题。当收件人快填满一行时,再直接输入,输入一定长度时,超过了一行的宽度,会将新输入的文本转移到下一行,结果输入框的高度被撑大了,但是却没有触发ie的回流,所以导致输入框会覆盖住下面的内容,但是过一会又会恢复正常显示,同样的,此时删除输入框的内容,到一定长度时,一行就可以显示所有内容,输入框高度又会变小,但是下面的内容又不会马上上移,造成了中间的一段空白。但是过一段时间以后又会变正常。
这是正常时的样式:

这是ie下异常的样式,输入框撑大以至于覆盖了下面的checkbox:

原因在于,在输入框撑大的时候,ie并没有回流页面,所以不能正常显示,所以我需要在输入的时候强制ie进行回流,虽然回流的代价可能很大。google了一下发现,有一个hack,当输入框内容发生变化时,给输入框添加一个不存在的css class并移除
($(input).addClass(‘fakeClassToFixIERenderingIssue’).removeClass(‘fakeClassToFixIERenderingIssue’)),这样就能触发IE的回流。

(参考:

http://kirblog.idetalk.com/2008/02/internet-explorer-rendering-problems-or.html

http://blog.dynatrace.com/2009/12/12/understanding-internet-explorer-rendering-behaviour/

http://www.rainleaves.com/html/1159.html

http://www.blogjava.net/BearRui/archive/2010/05/10/web_performance_repaint_relow.html

http://www.zhangxinxu.com/wordpress/2010/01/%E5%9B%9E%E6%B5%81E4%B8%8E%E9%87%8D%E7%BB%98%EF%BC%9Acss%E6%80%A7%E8%83%BD%E8%AE%A9javascript%E5%8F%98%E6%85%A2%EF%BC%9F/

在编辑完邮件后,会有一个preview页面,会将用户的数据发给后台,从后台返回preview页面,并采用了iframe来显示返回的邮件。但是在IE下,iframe有一个带有内阴影的边框,使用css的border:none属性无法去除,google后发现需要给iframe添加frameBorder=’0’的属性。但是在ie的调试工具下试了一下发现并不能起作用,后来在StackOverflow找到了答案,原来这个属性需要在iframe被加入到页面中前使用才生效,修改了代码后运行,发现果然可以(http://stackoverflow.com/questions/1516803/how-to-remove-border-from-iframe-in-ie-using-javascript)。

standard
  1. luckygirl - 2012 年 10 月 26 日 1:14 下午

    原来 当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建,就称为回流

    回复

Have your say