IE特殊处理三则

Posted in   IE   at 2013-03-20

做过前台开发的人员,或多或少都会碰到IE的兼容问题。

最近在给琥珀网做首页的时候,也碰到了IE显示问题。主要有三个问题:

  • 节目表单无法正确显示
  • IE7下,首页的jwplayer位置不正确
  • 首页中,各频道图片之间的间距显示不正确

有问题不可怕,可怕的是找不到问题所在,以及没有跟踪的办法。


琥珀网中的节目表单使用一个叫CHAP Links Library的timeline插件实现json数据动态加载。这个功能在FF,Chrome,Safari中都能正确工作,只有在IE中,无法显示节目单。

起初我一点头绪都没有,只要在js代码中增加alert语句来调试,唯一得到的就是代码可以正确的执行,就是结果不显示。

只好在IE的开发人员工具F12的帮助下,给js代码设置断点,搜索问题。

在timeline.js的draw方法中'this.setData(data)'设置一个断点,查看一下data数据,果然在这里发现问题,data数据中所有的日期字段都是"Undefined"。回到Chrome中查询对应的数据,发现这些日期都没有问题。

links.Timeline.prototype.draw = function(data, options) {
  this.setOptions(options);

   // read the data
   this.setData(data);

   // set timer range. this will also redraw the timeline
   if (options && (options.start || options.end)) {
       this.setVisibleChartRange(options.start, options.end);
   }
   else if (this.firstDraw) {
       this.setVisibleChartRangeAuto();
   }

   this.firstDraw = false;
};

这些日期数据都是ruby传给js的,形式如,str = 'Wed Mar 20 16:05:05 +0800 2013',然后把这个字符串传递给js的Date函数。

var time = new Date(str);  
// str ='Wed Mar 20 16:05:05 +0800 2013'

上面的这句话在Chrome,FF,Safari中都能正确的生成JS下的日期,只有IE下无法实现。为了搞清楚,特意google一下JS中Date的构造函数,参见

原来JS中,Date对象的定义有如下几种形式:

var d = new Date();

var d = new Date(milliseconds);

var d = new Date(dateString);

var d = new Date(year, month, day, hours, minutes, seconds, milliseconds);

其中dateString,只支持如下几种形式,当然不局限于如下形式:

October 13,1975 11:13:00

October 13,1975 11:13

October 13,1975

2010-06-09 15:20:00

2010-06-09 15:20

2010-06-09

2010-06

2010

对于IE来说,上面的'Wed Mar 20 16:05:05 +0800 2013'这种形式是不支持的,所以改为Date(milliseconds),问题就迎刃而解。


关于jwplayer位置不正确的问题,首先了解,jwplayer.setup("div_id")的方法,会生成如下代码:

原代码

<div id="div_id">jwplayer</div>

新代码

<div id='div_id_wrapper'><object id='div_id'>...</object></div>

所以在写css的时候,可以通过设置div_id_wrapper这个div样式来实现想要的效果。

本例中,还涉及到position:relative在IE7下不工作的问题。具体解决方案,参见,解释的很清楚。


关于第三个问题,没有修改任何css代码,只是在网页的头部添加了<!DOCTYPE> transitional DTD。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

具体参见

comments powered by Disqus