三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之
三人行必有我师焉,择其善者而从之,其不善者而改之

关于ie8和它的ie developer tools
作者:Neoxone    发表时间: 2009年08月23号,星期天     阅读:7,084 次

ie developers tools对于页面工作者来说,是个不错的调试html,css,js的有利工具,特别是ie8下的ie developers tools,已有媲美Firefox下的Firebug之势。
许多开发者担心升级ie8后,将无法使用ie7预览页面,其实根本不用担心这点,ie8下的ie developers tools可以选择浏览器模式来切换预览ie7的页面效果。

装上ie8后,按F12可以打开i developer tools(这个工具在ie8正式版下是附带的)。它的菜单栏的最后两项便是:浏览器模式和文本模式。
我们可以试一段代码:

你可以试着切换各种模式查看页面效果。
[singlepic id=16 w=400 h=500]

IE developer tools可以说已经是今非昔比了。Firebug的很多好东西他学会了,而且还具备了很多firebug所没有的一些实用工具。下面我一一道来:

1. CSS的选择性修改和预览。以前的ie developer tools可以增加样式,但要修改原有样式,需要写新样式来覆盖。而且,样式不能选择性屏蔽。现在的这项功能虽然界面上很绌,但同firebug一样方便有效。
[singlepic id=18 w=480 h=260]

2 DOM结构修改。这个也是ie8下developer tools新招,尽管firebug早就有了。
除了HTML元素标签,都可以直接修改(相比firebug,ie8还可以直接修改class,id及其它html属性项),使用alt+E则可以进去修改全部(包括HTML元素标签——同Firebug)。
[singlepic id=15 w=600 h=300]

3 DOM结构的查找。不过没有高级搜索,搜索范围是所有html标签,id、class名,textNode,即整个源文件。查找的的会高亮显示。
[singlepic id=17 w=520 h=180]
firebug上有个扩展插件叫Firefinder,查找起来应该更有针对性。

4.ie developer tools上还有三个额外的工具:一个是浏览器屏幕尺寸调整工具,一个是取色器,还一个是标尺工具。
[singlepic id=19 w=420 h=430]

5.还有,ie developer tools的js调试功能也已经可以媲美firebug了。

关于ie8的一些事:
1. 装了ie8后,你原来的傲游,世界之窗等浏览器会使用什么内核?
我相信是ie8内核,但他们对于html+css的解释,应该是按ie7浏览器模式(或则更有可能是ie8兼容模式)来解释的。
傲游浏览器可以在max:config的高级选项中进行设置更改是否采用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的了。
测试如下:

3.用ie8浏览网页,在地址栏后头还可能跟着一个按钮——兼容性视图按钮(浏览本地页面文件似乎不会出现这个按钮)。点击这个按钮,网页就进入ie8浏览器兼容模式下的ie7文本模式。
[singlepic id=14 w=430 h=195]
如果网页中被加入了<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />这句,说明网页已经采用ie8浏览器兼容模式下的ie7文本模式进行渲染了,就不会出现这个按钮。

4.ie8抛弃了haslayout私有属性?
前面说ie和ff很少会出现差异,我觉得很大原因因为是ie8抛弃了haslayout。
我们看一个由于haslayout引起的各浏览器的差异显示:

大家都知道,浮动元素应该是脱离文档流的,但是zoom:1会触发haslayout。所以在ie下,原本是应该脱离文档流的浮动元素仍然占据着文档空间,除非去除zoom:1;(注意对比FF和IE看看背景色的位置)。
然而我们会发现,ie8的效果一直同FF保持一致,并没有受haslayout影响。
可以再参考下这里ie私有属性haslayout的困扰

5.还发现ie8的一个小功能,是Firefox3.5所没有的。ie8可以忽视当前页签下的alert弹出框,在不关闭此弹出框的情况下就可以切换页签。
这个功能在遨游2.5和sougou浏览器也拥有。

标签: , , ,

2 条评论 发表在“关于ie8和它的ie developer tools”上

  1. 详细,顶了,看样子可以放心的装ie8了…

    回复

  2. 声乐 说:

    首先,非常感谢你写的这篇文章。但是最近我们项目就碰到IE7、8不兼容问题,即使使用你说的照样报错,在没有升级到8的IE7就没问题。所以有些问题还是要靠其它方法解决 ):7:(

    回复

留下回复

):9:( ):8:( ):7:( ):6:( ):5:( ):4:( ):3:( ):2:( ):20:( ):1:( ):19:( ):18:( ):17:( ):16:( ):15:( ):14:( ):13:( ):12:( ):11:( ):10:(