与“IE”标签相关日志

前言：对于 Hack 的使用，一直以来不提倡，应该尽可能的知道为什么，从根本上去解决问题，而不要遇到问题就 Hack，我们应该对代码“不作恶”，尽少使用，甚至不用。
对于 IE8 beta1 可以尝试下面的 Hack：
/*/ selector { … } /**/
此规则仅 IE8 beta1 识别，而其他 A-grade 浏览器都不识别。
不过这个 Hack 也许会在 IE 的 beta2 版本或正式版中被修复，暂可作为 IE8 beta1 调试之用。

Multiple IE（支持 XP下IE3 到IE6多版本共存） 相信很多朋友都用过，但其不支持 Vista，最大的问题是该软件已经很久未更新，集成的 IE 版本都过老，不适应现在浏览器测试的需求。
长江后浪推前浪：IETester 。

IETester 支持 Vista 和 XP 下IE8 beta 1, IE7，IE 6 和IE5.5 版本共存。
最新版本：v0.2.1 下载 中文包 (加入Languages 文件夹，默认在 C:\Program Files\Core Services\IETester )
最小需求：Windows Vista 或者 Windows XP 安装 IE7 版本( 如果安装的 IE6 版本 ，则Windows XP 下的 IE6 有一些小问题，并且在这个配置下 IE7/IE8 版本不能运行 )
不过任何软件都有不完美之处——
IETester 目前已知的问题有：

当窗口大小改变的时候，页面内容可能会消失（作者改进中）；
上一页/下一页功能不正常；
Focus功能不正常；
Java apple不能运行；
Flash... 12 条评论 »

第二届 D2 上，小马提到的一些 IE 常用调试工具：

Microsoft Script Debugger —— Companion.JS need to install this
Companion.JS —— Javascript debugger for IE , like Console API feature
IE Developer Toolbar —— Like Firebug (DOM/CSS etc)
Fiddler —— Web Debugging Proxy

上面的插件，自己平常工作中也基本用到，不过 Companion 还是第一次听说，自己也孤陋寡闻了一把。
怿飞补充一个：HttpWatch —— HTTP viewer

IE 官方提供的 IE5 到 IE8 的 CSS 兼容列表：《CSS Compatibility and Internet Explorer》（小马 最新提供的信息）
很好的参考资料，可以方便帮助大家了解和熟悉各 IE 浏览器之间 CSS 的兼容情况。
个人最近一直对 MS 另眼相看，从 IE 8 Beta 1 发布的第一天起，至少我们看到 MS 的态度，积极开放，结果虽不太如人意，但至少 MS 跨出了重要的一步，放下了一向高傲的姿态 。

IE8 (下文中的 IE8 暂时仅代表IE8 beta1) 中增加了 CSS3 中的子串匹配的属性选择器（substring matching attribute selectors），具体规则与正则中的匹配很相似：

E[att^='val'] //子串以’val’ 开始
E[att$='val'] //子串以’val’ 结束
E[att*='val'] //子串中包含’val’

IE8 支持绝大多数基本的 CSS2.1 选择器：

:before and :after 被支持，只支持文本，不支持图片，但还存在bug 。
:focus 被支持。
display: inline-block 被支持（只能用于内联元素）。
display: table 被支持。
list-style 完全被支持，包括值 upper-greek （此值其他浏览器均未支持）。
outline 被支持。
border-collapse, border-spacing 和 caption-side 被支持。
white-space 完全被支持。
box-sizing 被支持，不过使用的是私有属性 -ms-box-sizing 。

不支持的包括但不限于... 13 条评论 »

IE中z-index BUG
首先先来看一个演示例子的代码部分。
XHTML 部分：
<div id=”container”>
<div id=”box1″>这个box应该在上面</div>
</div>
<div id=”box2″>这个box应该在下面，IE浏览器会对定位元素产生一个新的stacking context ，甚至当元素 z-index的为“auto”。</div>
CSS 部分：
#container {
position: relative;
}
#box1 {
position: absolute;
top: 100px;
left: 210px;
width: 200px;
height: 200px;
background-color: yellow;
z-index: 20;
}
#box2 {
position: absolute;
top: 50px;
left: 160px;
width: 200px;
height: 200px;
background-color: green;
z-index: 10;
}
两个 box 被完全的定位，背景色为黄色的 box1 拥有 z-index 属性值 20，而背景色为绿色的 box2 拥... 0 条评论»

z-index 属性简介
z-index : auto | number
auto: 默认值。
number: 无单位的整数值，可为负数 。
z-index 值较大的元素将叠加在 z-index 值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。
注意：这个属性不会作用于窗口控件，如 select 对象。在IE5.5+中， iframe 对象开始支持此属性。而在之前的浏览器版本中， iframe 对象是窗口控件，会忽略此属性。
z-index 属性适用于定位元素（position 属性值为 relative 或 absolute 或 fixed的对象），用来确定定位元素在垂直于显示屏方向（称为Z 轴）上的层叠顺序（stack order）。
每一个定位元素都归属于一个stacking context。根元素形成 root stacking context，而其他的 stacking context 则由定位元素产生（此定位元素的 z-index 被定义一个非 a... 1 条评论 »

表达方式：+property:value
测试环境：IE5，IE6 ，IE7，FF1.5，FF2.0，Opera 9，Safari 2
测试结果：IE5，IE6 ，IE7浏览器识别；FF2.0，Opera 9，Safari 2浏览器不识别。
结论：我们可以用”+”来实现只有 IE 识别的 CSS Hack。
比如我们要实现在 IE 中 480px 的宽度，而在其他浏览器 500px 的宽度，就可以通过 “+” Hack 来完成，如下：
#hack {
width:500px;
+width:480px; /*only IE*/
}
这应该归结于IE对一些特殊字符的识别，大家还可以测试其他的特殊字符如：” >”,”-”,”@”……或许有更多的收获。
PS：可能有朋友想到 “_” Hack ，但它们是由区别的，因为IE7中是不识别“_”的。
扩展阅读：《Internet Explorer 7 CSS hacks》

:hover 是我们在 CSS 设计中最常运用的伪类之一，许多绚丽效果的实现离不开伪类 :hover，比如我们常见的纯 CSS 菜单、相册效果等等。
或许用了这么久的伪类 :hover，还有部分朋友还不完全了解 hover 的规则：
在 CSS1 中此伪类仅可用于 a 对象。且对于无 href 属性（特性）的 a 对象，此伪类不发生作用。
在 CSS2 中此伪类可以应用于任何对象。
但目前 IE5.5、IE6 仅支持 CSS1 中的 :hover，不过新出的 IE7 是支持 CSS2 中的 :hover。
当我们用伪类 :hover 做某些特殊效果时，依据 CSS2 很好完成，但为了现在占据主流浏览器的 IE6 ，我们又不得不做很多工作，比如给添加a元素等来模拟完成最终的效果。
或许这样讲太空洞，请看下面一个常见的触发显示的例子（仅选择IE6为例讲解）。
我们先用 CSS2 的写法来实现：
XHTML部分：
<... 6 条评论 »

PNG 图片在网站设计中是不可或缺的部分，最大的特点应该在于 PNG 可以无损压缩，而且还可以设置透明，对于增强网站的图片色彩效果有重要的作用。
但为什么 PNG 图片却没有 GIF 和 JPG 图片的使用来得广泛呢，这个祸因应归属于微软的 IE 浏览器（Firefox 和 Opera 对 PNG 支持的比较好，而现在浏览器的主流IE6 却无法很好的支持）。不过微软在最近也开始改过自新了，新出的的 IE7 可以很好的支持 PNG，可以想象在未来的网络世界，PNG 图片的重要性将会更加凸显。
但在大家还在绝大多数的使用 IE6 的时候，我们又怎样在 IE6 的世界去完美使用 PNG 图片呢（PNG 图片的时候最重要的地方在于 PNG 透明背景图片的运用）。我们应该庆幸我们是幸福的！IE5.5+ 的 AlphaImageLoader 滤镜为通向 png 提供了一个道路，如果他载入的是 PNG(Portable Network Graphics) 格式，... 3 条评论 »