除了对 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 下就显示正常了,再次感谢大家!
-
万戈大战浏览器众2009年10月12日 -
拿起武器,将 IE6 收归帐下2009年09月1日 -
IE8 背景图片错位现象2009年07月3日 -
Wordpress之终极Gzip兼容IE62009年06月11日
这个问题,我也郁闷了很长时间,确实是一语道破天机
知更鸟大驾,荒淫荒淫~
那也算是一个小小的经验吧
我的主题在ie下本地测试没问题。但在上传空间就错位。请指教。
估计是内容部分超出宽度,把侧边栏顶错位了
应该不是宽度问题。是侧边栏上下错位。你这做的蛮不错的。改天向您请教下。
居然是字体问题
op还是很少用的我
额 很难照顾那么多啊,这个主题是用雅黑的字体吗? 现在大多数人还用XP呢 相信很多人在opera下还是错位的吧
我只能兼顾XP或者Opera,XP与Opera的交集用户,只好暂时被我忽略了。。。。
浏览的兼容性是最头痛的事情了。
呵呵,是呀,我的IE6下还有一些小问题没解决呢
囧,这样也行啊……
vista中
错位的另一个原因,不是浏览器的问题,而是字体的原因,我第一次碰到
我用Opera 10 英文版看也不错位
是不是你默认字体的原因,你把字体改一下试试
谢谢啊,我去试试
太感谢了,果然是字体的原因,前些日子把vista改换成xp,默认的微软雅黑字体没了,所以才会出现错位,现在下载了一个微软雅黑的字体,已经好了,谢谢
那也就是说在没有装雅黑字体的XP下的Opera会错位?我也对于文字对齐很头痛,不过主要是在IE下面...
恩,对的,安装好字体后刷新一下就不错位了
五花八门的浏览器确实让人头疼啊,现在总算做到各浏览器下基本一致,辛苦啊~
用clera:both;清除下浮动应该不会有问题了。
谢谢,不过在本地测试了下,还是不行呢,可能是我显示器分辨率的问题吧
我用的Opera 10浏览的没有错位啊?
好奇怪。。。有人说错位,又有人说没错位。。。都是opera 10,为什么会显示不同呢?
其实我用Opera 10看出来也是正常的...
清除下浮动试试。
这个嘛,把背景和边框换成别的颜色就知道是谁在作怪。
是个好方法啊,先在本地上试试去,谢谢咯
不知你有没有发现,Opera下上一行只要有英文或数字,下一行就错位。而且你的非Opera下截图显示的英文字体用的是宋体,而Opera下好像是Verdana。有英文或数字的那个会比纯中文的高出1px~2px。要不再试试同时设height和line-height?
观察地好仔细呀,谢谢啦,我去试试
呵呵,一般来说Opera还是比IE可靠的...不过真碰到问题的时候就麻烦了...因为IE那些bug大家都知道而Opera就...
我这里看,在chrome上面是完全不错位的!期待高手
chrome是不错位的,是在opera下错位呢
试试看给设个height,在Opera下貌似高度不一样。可能因为这样所以float以后就乱了。
谢谢,我已经设过高度了,还是不行。。。
你的主题真是好漂亮哦,羡慕一个
我是火星来的,至今都没用过opera
我也要下个 来玩玩
opera太娇贵了...几年前就喜欢上它了,但我电脑一直不能与它兼容,超级郁闷!
你的要求是不是有点太严格了呀
不是一点点严格啊,哈哈
我是菜鸟,我路过!
我就是用opera,话说opera支持的是标准html,firefox能正常显示,opera也应该能吧。你可以用Chrome里的审核元素看看是哪里出问题了。
chrome下显示也正常,查不出问题。。。
别提了,在OPERA下,我的表情下还有个框呢,也不知从哪来的。
看来opera的兼容性确实不咋滴嘛
Opera这种市场份额小于5%的东西可以忽略不计
只要有人用,我就不能忽略它,谁叫我是完美主义者呢,呵呵
ul 和 li 之間不能有 span, 若有 class 可加在 ul 或 li 之後.
這些錯誤會造成不同瀏覽器有不同結果.
建議用 FF + Html Validator 可以看到錯誤.
大师就是大师,连评论都是这么专业,先谢谢啦,我检查一下去
这么晚还不忘来灌水,值得表扬
和你博客做了链接长期不来看看是不厚道的。话说我博客转型了,自己网站的博客现在只记录自己的学习,更新很慢,如果对你博客有影响你可以去掉博客链接了,或者也可以链接我百度空间,hi.baidu.com/秘密基地论坛
网站今天IP不知道能不能冲900,兴奋啊
呵呵,没关系的啦,友链重友情,只要常来往就可以了
IP居然能冲900!你太牛叉了!有你的一半我就很满足了
OP 相当好的浏览器,和FX比,也不错
但是我现在用搜狗。。。
搜狗也有浏览器?什么核心的?有什么优势?很小众啊
我打开新浪体育常年是错位的。。麻木了
我叮~~~连新浪都会错位,那我也无欲无求了
新浪错位太正常啦,国内主流网站早先是很不注重非主流浏览器的兼容的
我用opera没看见错位啊...你的opera发春了吧
又有一个说opera没错位的。。。。我重装了两个版本的opera,都错位,难道真是opera发颠?
试试把那几个名字太长的博友的博客名字想办法改短一点试试~
我试了,没用~郁闷死
完美主义者
错位还是挺影响美观的~
这个评论很到位,我就是完美主义者,嘿嘿
你为啥要这么苛刻。。。对了。。。我在找一个主题入门教程。。。来告诉我= =
http://www.essentialblog.cn/reset-rebuild-wordpress-theme-css-define-layouts/
这也是我搜来的,制作主题我还不是很有经验,都是现学现卖的
我的博客同样存在如此问题 顶起求解答
终于有人响应我了,激动啊~
这个情况我在其他人那也看到过。
不过你这我没发现错位啊!
可惜我不懂css- -
为什么都说我的没错位。。。。。我的opera可是官方下载的,怎么会和各位显示的不同捏~~~
呵呵,没有用Opera,
友情顶下.
opera果然很小众,呵呵,谢谢帮顶啊
Opera的速度很快,不过貌似对于CSS的兼容并不是很好,综合下来还是FF、Safari和Chrome比较好:)
每个浏览器都说自己是最快的。。。不过Opera对CSS的兼容性确实还没有进入主流
据说这款浏览器最好用,不过一直没有尝试过
不管是不是好用,我已经把所有的浏览器都收罗起来了,IE6/IE7/IE8/Firefox/Chrome/Opera/Safari,一个都不能少!
万戈,这叫啥癖啊?
兼容癖?
有時候這個東西很煩人 用的同樣的CSS 有些列表卻顯示不正常
我不用opera 只是來頂一下~~
是呀是呀,我已经特地为IE6和IE7单独写了样式,看来还要给Opera单独写一个,还不知道opera的CSS HACK呢。。。
等找到原因再说吧,可能也不是CSS的问题
没有错位啊?我用的是Opera 10。一切正常。。
为什么会这样。。。都说我的正常,只有我自己看是不正常的吗?明天去别的电脑上试试
希望是正常的吧,也免的我改这改那的了,谢谢测试~
我也测试过了,正常~
谢谢测试,看来是我显示器分辨率的原因了
晕 打开测试一下呢 发现已经撤掉了
没有啊,还在,首页位置,还是错位耶
搞不懂css啊。不过别忘了safari噢,有时候也很不兼容的
说的对啊,看来有必要再去下载一个safari测试一下
恩,win的用户不多,osx的用户基本还是用safari的。简洁,快速。
刚下载了safari,测试了一下,完全正常,现在已经把IE/FF/Chrome/safari都拿下了,集中火力向opera进攻!
你真是神速
必须的
要不你设置个固定高度试试?
我已经试过了,还是不行。。。
杯具……
是啊。。。最杯具的是还没找到原因
解决了?Opera10.0中文版下无错位!
没解决啊,我也是Opera10.0中文版,错位的。。。
灵异事件了,我也载个Opera看看先~~
是的,现在的浏览器这么多,要想让它们都能够与我们自己的Wordpress 主题相兼容的完美,有时候还真是个难题!
没办法,只有先考虑几个最主要的浏览器了吧。
恩,暂时把IE、FF和Chrome摆平了,下一个目标就是Opera
收费主题还错位?这个不属于他们的服务范畴么?
除了设计,这主题已经被我改的面目全非了。。。
这个侧边栏不是原主题的,已经被我静态化了的,纯HTML,这也会错位,我晕倒
呵呵 没用过
我也是第一天用就发现了这个问题。。。很囧
一会生二回熟
我在用opera mini
手机上