为了总结比较这两种效果，我特地做了两个 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 实现的，很好很强大吧。

但是，这样做会引起另外一个让我情何以堪的后果。因为我用的是 HTML5 的声明，已经通过了 W3C 的 HTML5 标准验证，但是在 meta 中加入那一行浏览器降级代码之后，HTML5 的 W3C 就无法通过了，就因为那一个错误！好吧，为了我的完美主义，我要绕开这个降级代码，忽悠一下 W3C 验证。

原理很简单，就是用 PHP 判断浏览器的版本，如果是 IE9 再输出那段 meta 信息，那其他浏览也就避开了这段代码，也就可以顺利通过 W3C 验证了。具体方法如下：

这样就可以让 IE9 在不打开兼容模式的前提下强制把 IE9 降级为 IE7，确保网站可以安全运行效果。但是这就又产生另外一个问题，IE9 自称是最能体现 HTML5 和 CSS3 的浏览器，所以本来网站在 IE9 下是可以有圆角有阴影的，但是这样一来，伪 IE7 下就不再有圆角和阴影这些 CSS3 的效果。没有关系，在用户体验方面，网站的功能体现肯定要比美观更重要，两者不用权衡，我选择前者。让 IE9 见他的爷爷 IE7 去吧。

文中方法来自：PHP 动态输出 X-UA-Compatible 参数 | 芒果

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

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

那我们为什么要鄙视 IE 呢？对于网页制作者而言，IE（以 IE6 为首）千奇百怪的 bug 实在让人无法容忍，从而导致网页错位，在不同的浏览器下表现各不相同，以至于我们不得不用五花八门的 CSS HACK 来弥补这一缺憾。但是要知道，CSS HACK 实在是不得以而为之，因为所谓的 CSS HACK 都是利用浏览器本身的 bug 来区分不同的浏览器使其识别各自“私有”的样式。这种以毒攻毒式的方法，确实可以在一定程度上解决网页错位等问题，但是会让网页的效率大打折扣，并不算是根本的解决之道。

那么，治标又治本的解决方法是什么呢？在回答这个问题之前，我想先为 IE6 这些年来默默承受的委屈洗冤。

很惭愧的是，我也曾多次咬牙切齿地痛斥过 IE6，并且很不人道地想和它十八代祖宗发生不正当性关系。但是，慢慢地，我了解了并且接受了 IE6 以及它的兄弟姐妹们，原来 IE 的错位源自于它那颗孤傲的心，只要我们足够了解它，那就完全可以避免使用 CSS HACK 来纠正网页错位等偏差。“孤傲的心”，此话何解？在我看来，IE 并非完全像人们所说的不标准，只是容错性不如 Firefox、Chrome、Opera、Safari 这些“标准”浏览器来的好，所以这些标准浏览器看起来比较能够理解我们所需要的结果，换句话说，IE 更直接更直观地把我们写的 DIV+CSS 中出的错误表现出来了，这样就不太讨好一些网页制作者，甚至会让人生厌，疏不知，其实更多时候，是我们自己写的 CSS 不够标准，不能责怪 IE。而且，IE 还有一个私有属性 layout，很多怪异的渲染问题都可以通过触发 layout 得到解决。

话归正题，要从根源上解决 IE 各种错位的难题，我想你会想看看这篇文章，引用作者的一句话：对 IE6 最好的策略就是不去兼容它。好好体会一下这句话的意思吧，当你真正征服 IE6 之后，你会发现这句话意味深长。

关于在主题中怎么添加 WordPress 3.0 的导航菜单功能我就不多说了，因为看很多人都写过鸟。我就来说一下这 3.0 的向下兼容问题。在我给新主题加上导航菜单功能后，发现一个很严重的问题，就是这个 wp_nav_menu() 调用函数居然只支持 WordPress 3.0，在我本地的 2.9 的环境中就报错了。可见 WordPress 官方的小组在升级的时候相当不给力啊，还要用户和开发者自己做向下兼容的处理。

看到一篇传说可以解决 WordPress 3.0 主题向下兼容以前版本的方法，不过明显作者在写代码的时候比较粗糙，并没有验证过（就算验证，也就是 WordPress 3.0 中作的测试），在我的 2.9 下还是行不通，仔细看了一下，也就是少了个判断，略加修改就可以使用了。

把以下代码复制到 WordPress 的 functions.php 中：

然后在主题需要的地方，比如说 header.php 中用这行代码调用即可：

这样就好了。回过来解释一下加入 functions.php 中的代码，简单来说分这么几个过程：1.判断是否支导航菜单的函数（也就是判断是不是 WordPress 3.0）2.如果是，就再调用 wp_nav_menu() 这个 3.0 中的导航菜单函数，一些参数什么的都可以在这里设置。3.如果不是，就调用 3.0 以下支持的 wp_page_menu() 这个函数，当然你也可以不用 wp_page_menu()，自己写在此情况下输出的内容，比较个性化。最后强烈建议 WordPress 官方将下一次升级中把这个兼容问题考虑进去。

一、!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

一个多月前，小站陆续收到 IE 的访客给我留言，说用 IE 访问我的博客时，经常卡到浏览器假死，其中居然还有人崇拜地问我是怎么做到的！？偶滴神啊~~~像我这样苦心做浏览器兼容的站长怎么会放弃整个 IE 的用户群呢？要打击我也只打击 IE6 啊，我真不是故意的。

刚开始我还没怎么在意个别留言反应问题的用户，因为其他大多数 IE 的访客并没有这样的现象，包括我自己用 IE 各版本测试了一下，也没有任何卡死的症状，我想可能是个别用户的 IE 浏览器或者电脑配置造成的吧，问题就这样被我忽视了。

最近，随着访问量的提高，在小站留言发出 IE 假死的呼声越来越高涨起来，其中尤其以牧狼羊为代表，这让我不得不重视起这个问题来。努力回想一下，一个多月前甚至可能更久之前，我对网站做过什么修改呢？到底是什么原因导致了部分 IE 用户无法正常访问小站？就在前天我还为一招制服 IE 而自鸣得意呢，没料到这么快又要为 IE 犯愁了……

想来想去我在 IE 与其他浏览器最大的不同就在样式上了，因为用了 CSS Hack，这才让我的回忆有了些头绪。一个多月前我参考了 whisperer 的一篇文章《去除IE和Firefox中链接的虚线框》，去除了 IE 中链接的虚线框，不过我并没有用 whisperer 给出的方法，而是用了 CSS 的 expression，还记得当时 whisperer 就提醒我说 CSS 的 expression 会很耗费浏览器的资源，不过我测试了一下，感觉并没有想象中那么夸张，所以就毅然地选择了 expression 这一危险用法。接下来的这一个多月中，我就用 Firefox 活在自己营造出来的美妙世界中，完全不知道 IE 的用户访问 Life Studio 时是个什么样子，直到好心的博友们顶着浏览器假死的危险给我留言，真的非常感谢，我这才慢慢清醒地认识到问题的严重性，原来我已经在无形中排斥了部分 IE 的访客，很是抱歉。

无论一个网站内容多充实，外观多精美，它的前提是可以被正常稳定地访问，所以为了更好的用户体验，我已经忍痛割舍了 expression 的用法，改换成 IE 的私有属性 hidefocus="true"，如果我的猜测没有错的话，对原本会造成 IE 浏览器假死的用户而言，现在应该已经可以正常访问小站了，欢迎广大 IE 用户测试，谢谢～

无图无真相，上图啦！

Chrome、Firefox、IE、Opera、Safari 等浏览器都一一败在我万戈的手下，其中尤以一招致胜 IE 那场最为经典，最为畅快，真是解了心头之恨呐，哈哈。其实这只不过是个姓名 PK 的 flash 小游戏（http://pk.easy365.net），仅供娱乐罢了。翻了一下我的日志分类目录，“嘻哈娱乐”下的文章最近更新的也在两个多月前了，看来这段时间我忙工作，忙折腾 WordPress 已经忙地神经紧绷了，就拿浏览器们调侃一下吧。

我的 WordPress 在 IE 各版本和 Firefox 下已经被我调教地基本一致了，所以这次错位只区分于 Opera 浏览器和非 Opera 浏览器，问题出现在首页位置侧边栏的“网上邻居”版块。

先看正常显示的非 Opera 浏览器下的“网上邻居”版块截图：

再看错位显示的 Opera 浏览器下的“网上邻居”版块截图：

浏览器不兼容导致的错位，大多数是因为 CSS 的不兼容引起的，所以开始我以为这一定是 Opera 不能识别某个选择器吧，查了半天没找到可疑的地方，而且灵异之处在于同样是右边栏的“日志归档”，和“网上邻居”用的是同一个选择器，同样的嵌套深度，居然日志归档版块在 Opera 下完全正常，请看 Opera 下的截图：

本是同根生，凭啥网上邻居错位而日志归档就正常显示呢？难道是网上邻居中的字符太多，超出限宽？于是我又给 ul 限了高宽，然后超出部分隐藏，结果依然如此。改样式不行我就改 HTML，我又把超出六个中文字的友链名称都缩减到了四个中文字，错位问题还是得不到解决……这个问题棘手了，我都不知道从哪里下手好，还请各位帮忙测试一下，能提供解决方案的那就最好啦～

本来想把这个问题提交到 WordPress 中文论坛，这个论坛还是有些人气的，但是因为每次我有问题提交到这个论坛，总是没有人能回答我的问题，所以还不如在日志中写出来，我想这样能看到问题的也有不少人吧，像上次困扰了我很久的 feedsky 不能正常输出的问题，就在日志发表后的第二天就解决了。我相信博友的力量是强大的，先谢过各位了。

10.10 Update：问题已解决，感谢各位童鞋的友情测试、倾情帮助还有宝贵意见，尤其是要感谢Betty一语道破天机。原来前段时间重装了系统，将 Vista 换回了 XP，所以默认的微软雅黑字体没有了，在 XP 下才会有侧边栏错位的幻觉，难怪好多博友都说小站在 Opera 下没有错位，搞的我好郁闷。听了Betty的意见，我下载安装了微软雅黑字体，在 Opera 下就显示正常了，再次感谢大家！