让我无从下手的 Opera 错位

除了对 WordPress 速度上有着极其苛刻的优化洁癖外,我还对 WordPress 主题在各浏览器下的兼容性有着严格的要求,至少要在主流浏览器中显示一致的效果。Opera 浏览器虽还没有占据主流浏览器的地位,但至少已经不再是当年的小众浏览器了。所以为了照顾到用 Opera 浏览器访问小站的用户,我今天特意去下载了 Opera 测试小站的兼容性。不测不知道,一测吓一跳,我的 WordPress 在 Opera 下还真有错位的现象,而且错位地非常离奇,甚至没有找到导致错位的原因。

我的 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 下就显示正常了,再次感谢大家!

  1. 不知你有没有发现,Opera下上一行只要有英文或数字,下一行就错位。而且你的非Opera下截图显示的英文字体用的是宋体,而Opera下好像是Verdana。有英文或数字的那个会比纯中文的高出1px~2px。要不再试试同时设height和line-height?

  2. 我就是用opera,话说opera支持的是标准html,firefox能正常显示,opera也应该能吧。你可以用Chrome里的审核元素看看是哪里出问题了。

  3. ul 和 li 之間不能有 span, 若有 class 可加在 ul 或 li 之後.
    這些錯誤會造成不同瀏覽器有不同結果.
    建議用 FF + Html Validator 可以看到錯誤.

      • 和你博客做了链接长期不来看看是不厚道的。话说我博客转型了,自己网站的博客现在只记录自己的学习,更新很慢,如果对你博客有影响你可以去掉博客链接了,或者也可以链接我百度空间,hi.baidu.com/秘密基地论坛
        网站今天IP不知道能不能冲900,兴奋啊 :mrgreen:

        • 呵呵,没关系的啦,友链重友情,只要常来往就可以了
          IP居然能冲900!你太牛叉了!有你的一半我就很满足了

    • 是呀是呀,我已经特地为IE6和IE7单独写了样式,看来还要给Opera单独写一个,还不知道opera的CSS HACK呢。。。
      等找到原因再说吧,可能也不是CSS的问题

  4. 是的,现在的浏览器这么多,要想让它们都能够与我们自己的Wordpress 主题相兼容的完美,有时候还真是个难题!
    没办法,只有先考虑几个最主要的浏览器了吧。

    • 除了设计,这主题已经被我改的面目全非了。。。
      这个侧边栏不是原主题的,已经被我静态化了的,纯HTML,这也会错位,我晕倒