解决诺豆网前台风格在部分浏览器中错位

前段趁放假给诺豆网做了个风格皮肤,但没有对太多的浏览器做测试就直接上线了!后来唏嘘一世提出在Opera有些错位,我去看了一下,发现只是评论列表分页链接处有些错位,但不影响整体阅读,而且个人正在处理其它的事,所以也就没有做修整!

接着的事让我差点想撞墙,就是前几天去百度博客逛逛,发现了几款常见浏览器的绿色单文件版,正好看到来访记录里有不少人用safari浏览器来访,于是就下载来看看这个风格是不是正常显示,一看几乎晕倒,看图

红色画圈的地方为日志主体内容,在safari里却靠得老右了,分析看看,一定是float未闭合,而safari的标准比较严,就造成了就种问题,猜想上面说的分页链接的错位可能也是这样造成的。说实话,我对标准什么的不是太懂,所以我做出来的东西在ie里支持可能会不错,但在ff,safari,opera里可能就不是那么理想了,但这些浏览器的使用群却是不能不重视的。但这个时候再补习已经来不及了,就使出杀手锏了:消除使用float后的残余属性。方法简单,即加一个 .f-clear { clear: both; }属性并适当调用即可!

问题解决,各浏览器显示均已正常,看来下一步得好好学学兼容的事儿了!

最后,分享一下我下载的几款浏览器吧,都是绿色单文件版的,不用安装,没有合适的网络U盘,暂时放在 微软网盘里

http://cid-3209a3faf7d20f7b.skydrive.live.com/browse.aspx/%e7%a8%8b%e5%ba%8f%e8%ae%be%e8%ae%a1/%e6%b5%8f%e8%a7%88%e5%99%a8