网上有过很多对 IE 版本进行判断的脚本，今天发现了一个最短、最给力、性价比最高的一段，甚至可以说是只有几行的脚本，可以对 IE 版本进行精确判断。当我看到这段脚本时，我震精了，眼中充满了泪花，征服 IE 指日可待了呀~

先来看看我写的一个 DEMO，建议使用 IE 进行测试，因为对 IE 以外的浏览器无法识别（经测试，IE 5 也是辨认不出来滴，不过我相信没有哪个火星人还在用 IE5 吧？）

见证完奇迹的时刻，我们再回头来看这段代码的核心部分：

代码短的不能再短了，语法也是基础的不能再基础了，可我就是看不懂他为什么要这么写，唉，牛人自有高招，咱只有佩服的份了。

方法来自：最短的 IE 版本判断

为了总结比较这两种效果，我特地做了两个 DEMO。

我们先看 DEMO1，这个图片放大效果是 CSS2.0 下的，具体的 HTML 和 CSS 如下：

优点：兼容性好，所有浏览器支持。

缺点：1、分别需要大图和小图两张图片。

2、因为用到 hover，所以在 IE6 下只有 a 标签才可以，IE6 不支持 hover 以外的 伪类。

然后我们再来看 DEMO2，这个图片放大效果是 CSS3.0 下的，部分 HTML 和 CSS 是和上面的样同的，我也就再重复写一遍了，具体的 HTML 和 CSS 如下：

优点：只需要一张图片就可以实现。

缺点：1、IE 不支持。

2、小图被强行扯大，分辨率不变的前提下，放大后会显得模糊。

到底哪个方法更好？这还要看具体需求。比如，我在顶部的几个小图标上就是用的 CSS3 的方法，因为放大的倍数不大，所以也不是很模糊，IE就无视了。

话再说回来，我把 CSS3 的 transform 属性拿来和 CSS2 中的图片放大效果比较，实在是太太太屈才了。因为一方面，CSS2 的那个方法严格意义上来说并不是放大方法，只是用 hover 伪类来模仿的效果，再者， transfrom 不仅仅是可以作用于图片，文字也同样有效，而且放大只是 transform 的一个值，它还能旋转，如果你的浏览器不是 IE，可以把鼠标放到评论头像上看看效果，那也是用 transform 实现的，很好很强大吧。

呵呵，总有一些像我一样的保守派会想出解决之道，一个仅仅 1.44 Kb 的脚本就可以满足兼容 IE 的HTML5标签。方法如下：

就是这么简单，至于 DEMO 嘛，今天没有时间上了，大家还是等我的 HTML5 主题吧，估计一周内可以上线了，哈哈。以上是一段存放于 Google Code 的脚本，不过我更习惯于把脚本下载至本地调用，我们都知道 Google 服务器的稳定性和速度堪称世界一流，但是我们又知道伟大的防火墙对 Google 也是虎视眈眈，所以……你懂的。

前段时间看到 twitter 上有人发了张讽刺 IE 的图片，很搞笑，这是一张以多啦A梦为测试的纯 CSS3 图，在各大浏览器下显示如下图：

很可爱吧，也很形象，充分展示了 CSS3 在 IE 下有多杯具。我本来以为这只是一个笑话而已，没想到还真有牛人把这个多啦A梦用 CSS3 表现出来了，神啊。点击进入测试页。大家可以用不同的浏览器打开这个页面试试，神奇的一幕会展现在你的面前，IE 下的多啦A梦是方头方眼方手方脚，就像被压扁了一样。

这就是 CSS3 的魅力，我还找到另外一个神人对 CSS3 的完美诠释，是我之前都无法想象的。点击进入测试页。

同样，要很好地欣赏到如图的效果，还是需要用非 IE 核心的浏览器才行，感叹一下吧，CSS3 居然能运用到如此出神入化的程度，真牛的不只一B了。

以上两个 DEMO 分别学习自：《好可爱的多啦A梦CSS3测试》和《震精了！CSS竟然可以这样》

仔细比较后发现，原来是字体大小的问题，我的 Chrome 浏览器居然不支持 12px 以下的字体大小？换了以 pt 或者百分比为单位的字体大小，也都是不管用，Chrome 所能识别的最小字体就停留在 12px 了，我倒～

以下我做了个简单的实验，列出了 font-size:6px; 至 font-size:18px; 的字体大小示例，用 IE、Firefox、Opera、Safari 浏览器的朋友都可以看到一个上宽下窄的梯形状。但是用 Chrome 浏览器的朋友就只能看到 18px 到12px 字体大小的一个上宽下窄的梯形，接下去的 11px 至 6px 都将以 12px 的字体大小显示。

我不知道这是 Chrome 的 bug，还是 Chrome 浏览器故意为之，是怕用户看不清 12px 以下的字号吗？而且比 IE 更杯具的是，IE 的 bug 还可以用 CSS HACK 来弥补，而 Chrome 的这个 bug 我都不知道有啥方法可以修正。老革命碰到新问题了，囧～

不知道哪位高手有 Chrome 中小于 12px 字体大小的显示方法呢？不吝赐教啊，在此谢过～

先上个测试页：http://wange.im/demo/duplicate-characters-bug/，你也可以下载这个 DEMO 页的源码在本地测试，后面的注释是4种解决方法，可以一一删掉注释查看。

大家可以用 IE6、IE7、Firefox、Opera、Chrome 等主流浏览器分别来测试一下这个页面，你会发现一个有趣的现象。

出现这个BUG的“机遇“其实并不大，要满足以下一个或者多个条件：

1.父元素的内部有多个浮动元素

2. 最后一个浮动元素前有隐藏元素：包括html注释和display：none的元素

3.子元素的宽度和父元素相同，父元素的宽度减去子元素宽度小于3px

有个特别有意思的情况出现，当我在最后一个显示的div前，再加display:none;的div，下面又会增加不固定的数量的重复文字！

最终得出的结论是：溢出文字的字数=注释的条数 *2-1

这个变态BUG的最早文献是出现在2004年，这里可见。

我不全文翻译了，总结一下他的方法。

1.把浮动的子元素加上display:inline;属性

2.去掉注释 ，使用IE专用注释。<!–[if !IE]>Put your commentary in here…<![endif]–>

以下是 Smigoo MM 总结的解决方法：

1.把浮动的子元素加上display:inline;属性（推荐）

2.去掉注释和所有隐藏元素（缺点：特殊情况下不一定可以删除）

3. 把浮动的子元素加上margin-right:-3px;属性（缺点：要加IE6的hack，也算是好方法）

4.在隐藏的DIV外嵌套一个DIV（缺点：增加的结果复杂性）

经过结合 smigoo MM 的总结，和我遇到的实际情况，因为我的父级浮动元素比较多，导致在 IE7/IE8 下都出现重复字符的囧境，所以我个人建议把浮动元素改成 display:inline-block;

现在算是完美解决了 IE 下重复字符的问题，感谢 smigoo MM，再一次让我认清了 IE 的丑恶本质，和 G/F/W 有的一拼！

虽说 Firefox、Chrome、Opera、Safari 这些浏览器都可以完美地支持 CSS3.0，但是它们各自对圆角的样式写法都各不相同，也可以说这些个浏览器都各自为政，都有自己私有属性，简介如下：

• border-radius:长度
• Firefox支持border-radius(圆角)：-moz-border-radius:2px;
• webkit内核的Safari和Chrome支持border-radius(圆角)：-webkit-border-radius:2px;
• Opera支持border-radius(圆角)：border-radius:2px;
• IE不支持border-radius(圆角)

我们还可以随意指定圆角的位置，左上、左下、右上、右下四个方向。在 firefox、webkit 内核的 Safari 和 Chrome 和 opera（css3）、中的具体书写格式如下：

-moz-border-radius-topleft / -webkit-border-top-left-radius / border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius / border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius / border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius /border-bottom-right-radius

以上转自：border-radius(圆角)-css3演示

这个图截自我的友情链接页面，我用了对称圆角，自我感觉比四个圆角要舒服一点。用非 IE 的朋友应该已经看到过了，这里就让 IE 的用户开开眼吧，劝 IE 的访客早日放弃 IE。

不过传说现在的 IE9 已经支持 CSS3/HTML5 了，可惜我等叉P用户无福享受，不知道现在的 IE9 能否支持圆角？会不会带来新的兼容问题，会不会有新的 HACK 技术出现？IE 总是耍大牌，我们不得不接受。

另外，推荐一个网站：http://roundedcornr.com/，应该算是懒人工具吧，可以帮助你生成圆角样式，不过可不是用 CSS3 哟，而是根据你设置的圆角半径、颜色等自动生成 HTML 和圆角图片，还是挺方便的吧。

今天我在 378q 上又看到了一个相当有意思的 IE浏览器中免安装使用Firebug调试的方法。

方法嘛，简单到不行，就是在网站中引入以下 JS 就可以了。

调出方式和在 FireFox 浏览器中一样，点 F12 或者 Bug 图标即可。

说到这里，或许你就明白了吧，IETester+DebugBar 和 Firefox+firebug 一样，是基本浏览器和辅助插件来查看/调试网站的，而免安装版的 IE 版 firebug 是基于脚本语言，而且很可惜的是，IE 版 firebug 和 IETester+DebugBar 一样，只可以查看 HTML、CSS、Script、DOM 等，但是不能修改值以及即时预览。

以下是 IE 版 firebug 的截图：

最后，感谢国家，并感谢 378Q 的分享，不知道同学们还有什么其他的高招来应付 IE 呢？

一、!important (功能有限)

随着 IE7 对 !important 的支持， !important 方法现在只针对 IE6 的兼容。（注意写法，记得该声明位置需要提前。）例如：

#example {
width: 100px !important; /* IE7+FF */
width: 200px; /* IE6 */
}

二、CSS HACK 的方法（新手可以看看，高手就当路过吧）

首先需要知道的是：

所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE7 专用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;

例如：

#example { height:100px; } /* FF */

* html #example { height:200px; } /* IE6 */

*+html #example { height:300px; } /* IE7 */

下面的这种方法比较简单

举几个例子：

1、IE6 - IE7+FF

#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
其实这个用上面说的第一种方法也可以
#example {
height:100px !important; /* FF+IE7 */
height:200px; /* IE6 */
}

2、IE6+IE7 - FF

#example {
height:100px; /* FF */
*height:200px; /* IE6+IE7 */
}

3、IE6+FF - IE7

#example {
height:100px; /* IE6+FF */
*+height:200px; /* IE7 */
}

4、IE6 IE7 FF 各不相同

#example {
height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}
或：
#example {
height:100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}

需要注意的是，代码的顺序一定不能颠倒了，要不又前功尽弃了。因为浏览器在解释程序的时候，如果重名的话，会用后面的覆盖前面的，就象给变量赋值一个道理，所以我们把通用的放前面，越专用的越放后面。

解释一下4的代码：

读代码的时候，第一行 height:100px;  大家都通用，IE6 IE7 FF 都显示100px。到了第二行*height:300px; FF不认识这个属性，IE6 IE7 都认，所以FF还显示100px，而 IE6 IE7 把第一行得到的height属性给覆盖了，都显示300px。到了第三行 _height:200px; 只有IE6认识，所以 IE6 就又覆盖了在第二行得到的 height，最终显示200px。这样，三个浏览器都有自己的height属性了，各玩各的去吧。

这样说要是你还不明白，要么你去撞墙，要么我去!不过还是你去比较好。

哦，差点忘了说了：

*+html 对 IE7 的兼容 必须保证HTML顶部有如下声明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">

三、使用IE专用的条件注释

<!--其他浏览器 -->

<link rel="stylesheet" type="text/css" href="css.css" />

<!--[if IE 7]>

<!-- 适合于IE7 -->

<link rel="stylesheet" type="text/css" href="ie7.css" />

<![endif]-->

<!--[if lte IE 6]>

<!-- 适合于IE6及以下 -->

<link rel="stylesheet" type="text/css" href="ie.css" />

<![endif]-->

貌似要编三套 css，我还没用过，先粘过来再说

IE 的 if 条件 Hack

1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
2. <!--[if IE]> 所有的IE可识别 <![endif]-->
3. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->
4. <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->
5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->
6. <!--[if IE 6]> 仅IE6可识别 <![endif]-->
7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
8. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
9. <!--[if IE 7]> 仅IE7可识别 <![endif]-->
10. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
11. <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->注:gt = Great Then 大于
> = > 大于号
lt = Less Then 小于
< = < 小于号
gte = Great Then or Equal 大于或等于
lte = Less Then or Equal 小于或等于

四、css filter的办法（据作者称是从国外某经典网站翻译过来的说）

新建一个css样式如下：

#item {

width: 200px;

height: 200px;

background: red;

}

新建一个div,并使用前面定义的css的样式：

<div >some text here</div>

在body表现这里加入 lang 属性，中文为zh：

<body lang="en">

现在对div元素再定义一个样式：

*:lang(en) #item{

background:green !important;

}

这样做是为了用 !important 覆盖原来的 css 样式，由于:lang 选择器 ie7.0 并不支持，所以对这句话不会有任何作用，于是也达到了 ie6.0下同样的效果，但是很不幸地的是，safari 同样不支持此属性，所以需要加入以下 css 样式：

#item:empty {

background: green !important

}

:empty选择器为 css3 的规范，尽管 safari 并不支持此规范，但是还是会选择此元素，不管是否此元素存在，现在绿色会现在在除 ie 各版本以外的浏览器上。

五、FLOAT 闭合（clearing float）

网页在某些浏览器上显示错位很多时候都是因为使用了 float 浮动而没有真正闭合，这也是 div 无法自适应高度的一个原因。如果父 div 没有设 float 而其子div却设了 float 的话,父div无法包住整个子 DIV，这种情况一般出现在一个父 DIV 下包含多个子 DIV。解决办法：

1、给父 DIV 也设上 float (不要骂我，我知道是废话)

2、在所有子 DIV 后新加一个空 DIV (不推荐，有些浏览器可以看见空 DIV 产生的空隙)

比如：

.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}

<div>
<div></div>
<div></div>
<div></div>
</div>

3、万能 float 闭合

将以下代码加入Global CSS 中,给需要闭合的div加上 class=”clearfix” 即可,屡试不爽.
代码:
<style>
/* Clear Fix */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

:after（伪对象）,设置在对象后发生的内容，通常和 content 配合使用，IE 不支持此伪对象，非 Ie  浏览器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦。

4、overflow:auto（刚看到的，极力推荐）

只要在父 DIV 的CSS中加上 overflow:auto 就搞定。

举例：

.parent{width:100px;overflow:auto}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}

<div>
<div></div>
<div></div>
</div>

作者原话：原理是，外围元素之所以不能很好的延伸，问题出在了 overflow 上，因为 overflow 不可见（见W3C的解释）。现在只要将给外围元素添加一个“overflow:auto”，就可以解决问题，结果是除了IE，真的可以解决。下来就要解决IE的问题了，再加上“_height:1%”，这个问题就完全解决了。

我试了一下，其实不加"_height:1%“在IE下也行，留着吧。

六、需要注意的一些兼容细节

1, FF 下给 div 设置 padding 后会导致 width 和 height 增加(DIV的实际宽度=DIV宽+Padding), 但IE不会.

解决办法：给DIV设定IE、FF两个宽度，在IE的宽度前加上IE特有标记" * "号。

2, 页面居中问题.

body {TEXT-ALIGN: center;} 在IE下足够了，但 FF 下失效。

解决办法：加上"MARGIN-RIGHT: auto; MARGIN-LEFT: auto; "

3, 有的时候在IE6上看见一些奇怪的间隙，可我们高度明明设好了呀。

解决办法：试试在有空隙的DIV上加上"font-size:0px;"

4, 关于手形光标. cursor: pointer. 而hand 只适用于 IE.

5, 浮动IE6产生的双倍距离

#box{ float:left;
width:100px;
margin:0 0 0 100px;
}
这种情况之下IE6会产生200px的距离

解决办法：加上 display:inline，使浮动忽略

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果

6 页面的最小宽度

min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重要的。

解决办法：为了让这一命令在IE上也能用，可以把一个<div> 放到 <body> 标签下，然后为div指定一个类：
然后CSS这样设计：
#container{
min-width: 600px;
width:e-xpression(document.body.clientWidth < 600? “600px”: “auto” );
}
第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7、UL和FORM标签的padding与margin

ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0；

解决办法：css中首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,后面就不会为这个头疼了.

8 ,DIV浮动IE文本产生3象素的bug

下面这段是我在网上粘过来的

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
<DIV id=box>
<DIV id=left></DIV>
<DIV id=right></DIV>
</DIV>

针对上面这段代码，下面说一下我的理解：

第一、只要right定义了width属性，在FF下绝对就会两行显示
第二、两个width都定义为百分比的话，就算都为100%在IE下也会一行显示。所以上面那句所谓“这句是关键”根本没用，不加也在一行，除非你width定义的是数值才用得上。

所以说上面这段代码其实用处不大，至少在FF下不行。其实只要只定义left的width就行了，right不定义width就不管在IE还是FF 下都能成功，但这样的话父DIV BOX并没有真正的包含LEFT和RIGHT两子DIV,可以用我上面说的第5种办法解决。最简单的办法就是在RIGHT中加上float:left就 OK了，真磨叽！

9,截字省略号

.hh { -o-text-overflow:ellipsis;
text-overflow:ellipsis;
white-space:
nowrapoverflow:hidden;
}
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾。技术是好技术，很多人都喜欢乱用，但注意 Firefox 并不支持

本文转自：http://www.kukala.com.cn/archives/586.html

1.IE 6 下不支持透明的 PNG 图片的解决方案

DD_belatedPNG，支持 backgrond-position 与 background-repeat.，同时 DD_belatedPNG 还支持 a:hover 属性，以及<img>，不仅支持 png 作为图片，也支持标签插入的 png 图片，你可以查看目前发现的一些问题。同时，这里也有一份中文的说明。

2.IE 6 背景闪烁问题

如果你给链接、按钮用CSS sprites作为背景，你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于 IE6 没有将背景图缓存，每次触发hover的时候都会重新加载，可以用 JavaScript 设置 IE6 缓存这些图片：

document.execCommand("BackgroundImageCache",false,true);

如果 a 和 a:hover 使用的不同的背景图片，将图片合成在一起，css 中通过 background-postion 控制其位置，页面中加入从缓存读取背景图片的 javascript 脚本。

3. IE 6 双空白边浮动 bug

当你为一个浮动元素赋予一个 margin 值，IE 6 下这个 margin 值会被双倍计算。解决办法：添加 display:inline;

4. IE 6 3像素文本偏移 bug

假设将-个元素向左浮动，并且不希望相邻段落中的文本围绕浮动元素。你可能会在段落上应用一个左空白边，其宽度等于浮动元素的宽度:

.float { float: left; width: 100px; }
p { margin-left: 100px; }

如果这么做，IE 6 在文本和浮动元素之间就会出现一个莫名其妙的3像素间隙。解决办法：

* html p { height: 1%; margin-left: 0; }
* html .Float { margin: 0; }

5.IE 6 躲躲猫 bug

出现这个 bug 的条件是：一个浮动元素后面跟着一些非浮动元素，然后是一个清理元素，所有这些元素都包含在一个设置了背景颜色或图像的父元素中。如果清理元素碰到了浮动元素，那么中间的非浮动元素看起来消失了，隐藏到了父元素的背景颜色或图像后面，只有在刷新页面时才重新出现。

解决办法：让包含它们的元素具有hasLayout属性：* html .box { height: 1%; }

我知道 IE 的 bug 肯定不只这些，现在向广大博友征集 IE 其他的 bug，最好是提供解决方案，本文会同步更新，谢谢各位啦～

本文转自：http://www.panxianhai.com/ie-bugs.html