渐渐的现在网上讨论ie8的相关帖子多了起来。
不过很多人对ie8的了解气死都是来自于片面的,以及过时的一些网上的介绍。
虽然,本文同样片面,或许也过时了(本文写于昨晚)。但通过本文的讨论,一定能引出各位更全面,更深刻的见解。
ie8在beta版的时候的定位好像就是针对页面工作者的,但一直以来并没有得到多少人心。
提到ie下的页面工作,就不得不提ie developer tools了,相信各位不不会陌生,不过给大家的印象就是同Firefox下的Firebug相去甚远。
ie developers tools对于页面工作者来说,是个不错的在ie下调试html,css,js的工具,特别是ie8下的ie developers tools,已有媲美Firefox下的Firebug之势。
许多开发者担心升级ie8后,将无法使用ie7预览页面,其实根本不用担心这点,ie8下的ie developers tools可以选择浏览器模式来切换预览ie7的页面效果。
装上ie8后,按F12可以打开i developer tools(这个工具在ie8正式版下是附带的)。它的菜单栏的最后两项便是:浏览器模式和文本模式。
如果你跟我一样装了ie8,我们可以用这段代码试试:
提示:复制文本框里面的代码,在桌面建立以个HTML文件,保存代码执行即可。
你可以试着切换各种模式查看页面效果。
![](//img.iefans.net/wp-content/uploads/2009/08/19ae_361722_1251042957R10o.jpg)
IE developer tools可以说已经是今非昔比了。Firebug的很多好东西他学会了,而且还具备了很多firebug所没有的一些实用工具。下面我一一道来:
1. CSS的选择性修改和预览。以前的ie developer tools可以增加样式,但要修改原有样式,需要写新样式来覆盖。而且,样式不能选择性屏蔽。现在的这项功能虽然界面上很绌,但同firebug一样方便有效。
![](//img.iefans.net/wp-content/uploads/2009/08/d72b_361722_1251042960ue7E.jpg)
2. DOM结构修改。这个也是ie8下developer tools新招,尽管firebug早就有了。
除了HTML元素标签,都可以直接修改(相比firebug,它可以直接修改class,id及其它html属性项),使用alt+E则可以进去修改全部(包括HTML元素标签——同Firebug)。
![](//img.iefans.net/wp-content/uploads/2009/08/df4a_361722_1251042956Zzi8.jpg)
3. DOM结构的查找。不过没有高级搜索,搜索范围是所有html标签,id、class名,textNode,即整个源文件。查找的的会高亮显示。
![](//img.iefans.net/wp-content/uploads/2009/08/fe4f_361722_1251042959JPNN.jpg)
firebug上有个扩展插件叫Firefinder,查找起来应该更有针对性。
4. IE developer tools上还有三个额外的工具:一个是浏览器屏幕尺寸调整工具,一个是取色器,还一个是标尺工具。
![](//img.iefans.net/wp-content/uploads/2009/08/92c3_361722_1251042953NEc0.jpg)
5. 还有,ie developer tools的js调试功能也已经可以媲美firebug了
关于ie8的一些事:
1. 你装了ie8,你原来的傲游,世界之窗等浏览器会使用什么内核?
我相信是ie8内核,但他们对于html+css的解释,应该是按ie7浏览器模式(或则是ie8兼容模式)来解释的。
不信你可以在装了ie8的情况下,使用这些浏览器测试下上面那段代码。
2. 关于针对ie8的hack
对区别ie6,ie7,ie8来说,前面的测试代码里已经可以看出,”_”和”*”在ie8下都不能识别,那剩下就是怎么区别ie8和FF了。其实,对于html+css的解释,ie和ff很少会出现差异。当然,留这么一手,还是有必要的。
“_”hack针对于ie6;”*”或”+”hack针对于ie6,ie7;”\9″hack则针对于ie6,ie7,ie8有效,剩下的没加hack的就是给FF的了。
测试如下:
提示:复制文本框里面的代码,在桌面建立以个HTML文件,保存代码执行即可。
3. 用ie8浏览网页,在地址栏后头还可能跟着一个按钮——兼容性视图按钮(浏览本地页面文件似乎不会出现这个按钮)。点击这个按钮,网页就进入ie8浏览器兼容模式下的ie7文本模式。
![](//img.iefans.net/wp-content/uploads/2009/08/ee7b_361722_1251042954MZDq.jpg)
如果网页中被加入了
这句,说明网页已经采用ie8浏览器兼容模式下的ie7文本模式进行渲染了,就不会出现这个按钮。
4. ie8抛弃了haslayout私有属性?(希望提供更直接的证据)
前面说ie和ff很少会出现差异,我觉得很大原因因为是ie8抛弃了haslayout。
我们看一个由于haslayout引起的各浏览器的差异显示:
提示:复制文本框里面的代码,在桌面建立以个HTML文件,保存代码执行即可。
大家都知道,浮动元素应该是脱离文档流的,但是zoom:1会触发haslayout。所以在ie下,原本是应该脱离文档流的浮动元素仍然占据着文档空间,除非去除zoom:1;(注意对比FF和IE看看背景色的位置)。
然而我们会发现,ie8的效果一直同FF保持一致,并没有受haslayout影响。
可以再参考下这里ie私有属性haslayout的困扰。
5.还发现ie8的一个小功能,是Firefox3.5所没有的。ie8可以忽视当前页签下的alert弹出框,在不关闭此弹出框的情况下就可以切换页签。
这个功能在遨游2.5和sougou浏览器也拥有。
标签:IE相关IE8developertools