关于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除外。

Comments: 44

  1. 必须收藏了,免得走弯路
    这些个小bug有时真折腾人 :?:

    2011年07月10日
  2. IE下只有没有太过影响浏览的问题,我就不管了

    2011年07月10日
  3. 有BUG才有会有折腾呀!!

    2011年07月10日
  4. ie事就是多啊。

    2011年07月10日
  5. js里遇横线都是把横线后的第一个字母大写的,
    jQuery的css({})方法, 里面的大括号对象的组成是
    a : ‘b’
    其中a不该有引号的

    2011年07月10日
    • @phoetry JQ的api里说,类似.css(‘background-color’) 和 .css(‘backgroundColor’)都是可以的,并且,JQ可以理解.css({‘background-color’: ‘#ffe’}) 和.css({backgroundColor: ‘#ffe’})。我还是觉得这个问题和浏览器有关系~~~

      2011年07月10日
    • @axiu 还是用后者吧…反正前者也是要被jq转化为后者才能生效的…

      2011年07月10日
    • @phoetry 嗯,以后一定注意

      2011年07月10日
  6. 360也就是IE带了个套 :idea: :idea:

    2011年07月11日
  7. 这个新主题好赞的说…清新简爽啊 :grin:

    2011年07月15日
    • @Afio 嗯,是小清新

      2011年07月24日
  8. 这个就没什么研究咯

    2011年07月22日
  9. 对这个没研究

    2011年07月27日

发表评论

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

*

:razz: