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

本文已盖 100 层楼

  1. 回复 流年 说:

    居然是字体问题

  2. 回复 蛋卷 说:

    op还是很少用的我

  3. 回复 countmeon 说:

    额 很难照顾那么多啊,这个主题是用雅黑的字体吗? 现在大多数人还用XP呢 相信很多人在opera下还是错位的吧

  4. 浏览的兼容性是最头痛的事情了。

  5. 回复 蓝冰 说:

    囧,这样也行啊……
    vista中

  6. 回复 Betty 说:

    我用Opera 10 英文版看也不错位
    是不是你默认字体的原因,你把字体改一下试试

  7. 用clera:both;清除下浮动应该不会有问题了。

  8. 我用的Opera 10浏览的没有错位啊?

  9. 清除下浮动试试。

  10. 这个嘛,把背景和边框换成别的颜色就知道是谁在作怪。

  11. 回复 Justice 说:

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

  12. 回复 石老人 说:

    我这里看,在chrome上面是完全不错位的!期待高手

  13. 回复 Justice 说:

    试试看给设个height,在Opera下貌似高度不一样。可能因为这样所以float以后就乱了。

  14. 回复 小新说 说:

    我是火星来的,至今都没用过opera
    我也要下个 来玩玩 :mrgreen:

  15. opera太娇贵了...几年前就喜欢上它了,但我电脑一直不能与它兼容,超级郁闷!

  16. 回复 说:

    :mrgreen: 贫道却是想答施主疑惑,不过不知从何处谈起,先交50抽个签占卜下虔诚吧。

  17. 回复 laofan 说:

    你的要求是不是有点太严格了呀

  18. 回复 Lxhome 说:

    我是菜鸟,我路过!

  19. 回复 翎峋 说:

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

  20. 回复 短歌行 说:

    别提了,在OPERA下,我的表情下还有个框呢,也不知从哪来的。

  21. 回复 CDHaha 说:

    Opera这种市场份额小于5%的东西可以忽略不计

  22. 回复 willin 说:

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

  23. 回复 说:

    :eek: 我是来灌水的

    • 回复 万戈 说:

      这么晚还不忘来灌水,值得表扬 :grin:

      • 回复 说:

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

  24. 回复 戴亮 说:

    :idea:
    OP 相当好的浏览器,和FX比,也不错
    但是我现在用搜狗。。。

  25. 回复 胡一刀 说:

    我打开新浪体育常年是错位的。。麻木了

  26. 回复 小明猪 说:

    我用opera没看见错位啊...你的opera发春了吧 :mrgreen:

  27. 回复 小明猪 说:

    试试把那几个名字太长的博友的博客名字想办法改短一点试试~ :wink:

  28. 回复 exia 说:

    完美主义者
    错位还是挺影响美观的~

  29. 回复 江流 说:

    你为啥要这么苛刻。。。对了。。。我在找一个主题入门教程。。。来告诉我= =

  30. 我的博客同样存在如此问题 顶起求解答

  31. 回复 A.shun 说:

    这个情况我在其他人那也看到过。
    不过你这我没发现错位啊!

    可惜我不懂css- -

  32. 回复 铵铵 说:

    呵呵,没有用Opera,
    友情顶下.

  33. 回复 evacuee 说:

    Opera的速度很快,不过貌似对于CSS的兼容并不是很好,综合下来还是FF、Safari和Chrome比较好:)

  34. 据说这款浏览器最好用,不过一直没有尝试过

  35. 回复 mimzyx 说:

    万戈,这叫啥癖啊? :lol:

  36. 回复 kevinsnow 说:

    有時候這個東西很煩人 用的同樣的CSS 有些列表卻顯示不正常
    我不用opera 只是來頂一下~~

    • 回复 万戈 说:

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

  37. 回复 SMILE 说:

    没有错位啊?我用的是Opera 10。一切正常。。

  38. 回复 Louis Han 说:

    晕 打开测试一下呢 发现已经撤掉了

  39. 回复 MuMu'S 说:

    搞不懂css啊。不过别忘了safari噢,有时候也很不兼容的

  40. 回复 阿修 说:

    要不你设置个固定高度试试? :roll:

  41. 回复 林木木 说:

    解决了?Opera10.0中文版下无错位!

  42. 回复 林木木 说:

    灵异事件了,我也载个Opera看看先~~

  43. 回复 365hope 说:

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

  44. 回复 whisperer 说:

    收费主题还错位?这个不属于他们的服务范畴么?

    • 回复 万戈 说:

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

Leave a comment

您已输入0

三言两语

我的生活心情语录

工作手札

路漫漫其修远兮

精品推荐

好东西要分享

嘻哈娱乐

八卦趣事一笑而过

电脑网络

全新技术尽搜罗

转来载去

文人墨客美文赏析