关于background-position的问题

By
技术文档

每次做主题都有特别的发现,对于我这样喜钻研愛探索的好同学来说,这是很欣喜的一件事。昨夜永哥说目前的主题在360浏览器下有问题,我惯性的以为是不死的IE6在作怪,所以没怎么放在心上。今天上午用IEtester打开首页和内页,果然出现很多错误提示,还有各种布局的悲惨效果。遂决定改改。

基本内容分为js和css两个部分。

首先是js报错,奇怪只是IE下报错。我找了一下,首先发现的错误是因为在某个{…}内的结尾处写了一个逗号,这是不允许的,疏忽。

接下来是另外一个,这个就比较奇怪了:xx is null or not anobject。本地查找折腾了半天,发现是一句css提取的错误。在边栏的categories那里,我用js控制的背景滑动。当然得首先提取css的background-position,就是这个属性,让我费了老大劲。

1、chrome和safari下,background-position/background-position-x(y)啥都支持;
2、firefox、opera不支持background-Position-x/y,但是支持background-position;
3、IE支持background-Position-x/y,也支持background-position。

所以这里的思路就只能是:提取background-position,然后调用。

但是,一旦往里这么写:pos = $(this).css('background-position');
IE下立刻就会报错“x行x列,xx is null or not an object”。alert返回的值也是“undefined”。网上的老外们有的说传值进去再传回来,有的让升级js库,有的直接让升级浏览器,MD能升级还要你干啥。
解决办法:改成css('backgroundPosition')。具体原因,没有系统学习过,不解答。

css部分,主要修改了一下评论的reply部分,和首页的“躲猫猫”部分的圆角。嗯,还有记录访客信息,头像神马的,荒淫测试反馈。

感想:IE虽然常常落后很多,但是某些时候,正式考验我们代码写的是否严谨,比如css里许多不合规范的写法,在其他浏览器都可以正常显示,但是IE会错乱,我们一直在骂IE不死,但是如果是小型代码量,稍微规整一下,IE下也不是那么惨不忍睹的。

当然,IE6除外。

0

Comments: 44

  1. jQuery 应该是支持 $("xxx").css("background-position") 这种写法的,详见 http://api.jquery.com/css/

    2011年07月07日
    • @Alan jQuery完全支持的。但是如果要xx = $(“xxx”).css(“background-position”)这样,IE就会报错~~

      2011年07月07日
  2. 淫的折腾精神太厉害鸟!

    2011年07月07日
    • @zwwooooo 这句话读起来还是怪怪的

      2011年07月07日
  3. 阿修的站效果是越来越好啦,哈哈~~~

    2011年07月07日
    • @奶牛 谢谢奶牛夸奖

      2011年07月07日
  4. 没留意过这个,测试了一下,在IETester中的6下,即便是backgroundPosition都是undefined :eek: RPWT??

    2011年07月07日
    • @流年 必须是RPWT……

      2011年07月07日
  5. 继续试验了下,旧版本的 IE 虽然支持 background-position 这种 CSS 语句,但在 JQ 中这样去获取值的时候获取不到(写可以),只能用 background-position-y 或 backgroundPositionY 这样的方式去获取

    2011年07月07日
    • @流年 这就是问题所在了,firefox和opera不支持background-position-y(x)。所以还得用background-position,jQuery中css(..)这个函数获取却得用backgroundPosition

      2011年07月07日
    • @axiu 其实,你现在的那个 var pos = $(this).css('backgroundPosition'); 在 IE6 中其实是会有问题的,如果一开始没有如内联的 style 来定义 background-position,是获取不到值的。只是,你这里刚好一开始就已经输出来了所以没问题(我碰到了个很郁闷的问题的说。。。。。)

      2011年07月07日
    • @流年 悲催的IE啊……要求太多了。你的那种情况就不知道怎么解决了。实在不行就给firefox们加浏览器判断

      2011年07月07日
  6. 突然发现评论的行距不够大,当用了 code 的时候,就部分重叠了

    2011年07月07日
    • @流年 嗯……折中一下,我把code间距设置小些~~

      2011年07月07日
    • @axiu :mrgreen: 单独对评论的 code 做了修改

      2011年07月07日
    • @流年 一眼就被你看出来了~~

      2011年07月07日
    • @axiu 觉得跟 #content .post一样设为 20px 更好看些,感觉现在这个有点窄

      2011年07月07日
    • @流年 先这样吧,我总觉得调大了看着散散的~~嘿嘿。谢谢指正哈

      2011年07月07日
  7. 出现问题自己能动手而且这么快解决,实在羡慕之,我遇到问题,很长时间才能琢磨。

    2011年07月08日
    • @郑永 我也是琢磨了很长时间的

      2011年07月09日
  8. IE版本不同,浏览器不同,麻烦多呢

    2011年07月08日
  9. 嗯,

    2011年07月08日
  10. 兼容很真麻烦~~~

    2011年07月08日
    • @IM路人 ???真是很麻烦

      2011年07月09日
  11. 你小子折腾吧就,啥时候做个新主题发个给我玩玩哇

    2011年07月08日
    • @N ^_^熊猫伯伯你又谦虚了。

      2011年07月09日
  12. :oops: 就喜欢有这种钻研劲的人
    :arrow: 刚跑去百度了下..专研和钻研…语文不好的人伤不起.. :cry:
    专研:应该是专门研究一个课题。侧重强调专门,独一无二的。
    钻研:深入细致地研究。侧重强调深入,细致,不一定独一无二。

    2011年07月08日
    • @mice 都是爱钻研的淫哪!

      2011年07月09日
  13. IE6只要一天还能成气候就一天要受我们的诅咒和唾骂!

    2011年07月09日
  14. 貌似360开始提示升级IE6了,赞…

    评论头像羞涩地钻出来缩进去真有爱~~

    2011年07月09日
  15. 又回头看你了,去我那坐坐!!

    2011年07月09日

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:razz: