IE7 与 IE6 的模式窗口尺寸差异
作者:快乐笛子 来源:快乐笛子博客 时间:2008-03-06 13:49:00
IE 的弹窗常用的有两种,不外乎是 window.open 与 window.showModalDialog,前者兼容性好,后者只有IE认识(Firefox的1.x版本与3.x版本支持window.open(url,handle,"modal=yes"),这是ff的模式窗口)。
模式窗口由于其强制必须完成模式窗口的操作,当前window才能被继续使用,它的这一特性,使它在一些 Web Application 中应用较广,它的好处本文不赘述,这里要探究的是用 javascript 设置相同的窗口尺寸,模式窗口在 IE6 与 IE7 下竟然表现不一致。
执行语句:window.showModalDialog('b.html',window,'dialogWidth:250px; dialogHeight:250px;'),对比在 IE6 与 IE7 下的表现差异:
250*250 这一尺寸是特意设的,右图IE6的window尺寸严格按照设置的尺寸展示,但是左边的IE7展示结果却让人大吃一惊,为什么是 317*256 ?
认真分析一下317与256的数字,其中宽度 256 应该是设置的宽度再加上 window 的 border-width,即 250+3+3=256。而 317 的高度则应该是设置的高度再加上 titlebar(20px)、location(21px) 与 statusbar(20px) 的高度,还要加上 border-width(3px+3px),即 250+20+21+20+3+3=317。用ps把右图移动到左图上,更能说明这一尺寸的变化:
IE6 的模式窗口刚好完整的覆盖到 IE7 窗口的内容区域上,IE7 的模式窗口露出了titlebar、location与statusbar,还有边框。
IE7 的这一变化给一些已定的模式窗口带来了不必要的麻烦,强行显示location与statusbar可以理解,但高度作如此变化却害苦的一班 web developer。看看 IEBlog 中的评论内容,群情激奋~
另外一个发现,IE7下的模式窗口存在最小宽度:250px ,奇怪的定义刚好用一个准确的数字来体现。
推荐:总结showModalDialog和showModelessDialog用法