IE7 与 IE6 的模式窗口尺寸差异

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 ，奇怪的定义刚好用一个准确的数字来体现。