Ошибки управления в IE

Question

При запуске карты OpenLayers в IE9 я получаю "Невозможно получить значение свойства 'displayClass': объект нулевой или неопределенный" сообщение об ошибке.

После осмотра проблемы кажется, что эта строка в файле Openlayers.js является проблемой

this.controls=this.controls.concat(controls);
for(var i=0,len=controls.length;i<len;i++)
{var element=document.createElement("div");
element.className=controls[i].displayClass+"ItemInactive"; /* Problem here */
controls[i].panel_div=element;if(controls[i].title!="")
{controls[i].panel_div.title=controls[i].title;}

Сценарий для моей пользовательской панели инструментов:

OpenLayers.Control.CustomNavToolbar = OpenLayers.Class(OpenLayers.Control.Panel,{
    initialize: function(options){
        OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
        this.addControls([
            new OpenLayers.Control.Navigation({displayClass: 'olControlNavigation', zoomBoxEnabled:false}),
            new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Point, {displayClass: 'olControlDrawPoint'}),
            new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Path, {displayClass: 'olControlDrawPath'}),
            new OpenLayers.Control.DrawFeature(vlayer, OpenLayers.Handler.Polygon, {displayClass: 'olControlDrawPolygon'}),
            new OpenLayers.Control.ZoomBox({displayClass: 'olControlZoomBox', alwaysZoom:true}),
        ])
        this.displayClass = 'olControlCustomNavToolbar'
    },
    draw: function(){
        var div = OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);
        this.defaultControl = this.controls[0];
        return div;
    }
});
var panel = new OpenLayers.Control.CustomNavToolbar({div:OpenLayers.Util.getElement('panel')});
map.addControl(panel);

с помощью CSS

    olControlCustomNavToolbar{
        float:left;
        right:0px;
        top:0px;
        width:160px;
        height:24px;
        margin:0px 6px 0px 0px;
    }   
    .olControlCustomNavToolbar div{
        float:right;
        height:24px;
        width:160px;
        margin:0px 0px 0px 6px;
    }
    .olControlCustomNavToolbar .olControlNavigationItemActive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/pan_on.png")!important;
        background-repeat: no-repeat;
    }
    .olControlCustomNavToolbar .olControlNavigationItemInactive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/pan_off.png")!important;
        background-repeat: no-repeat;
    }
    .olControlCustomNavToolbar .olControlDrawPointItemActive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/draw_point_on.png")!important;
        background-repeat: no-repeat;
    }
    .olControlCustomNavToolbar .olControlDrawPointItemInactive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/draw_point_off.png")!important;
        background-repeat: no-repeat;
    }
    .olControlCustomNavToolbar .olControlDrawPathItemActive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/draw_line_on.png") !important;
        background-repeat: no-repeat;
    }
    .olControlCustomNavToolbar .olControlDrawPathItemInactive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/draw_line_off.png") !important;
        background-repeat: no-repeat;
    }
    .olControlCustomNavToolbar .olControlDrawPolygonItemActive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/draw_polygon_on.png") !important;
        background-repeat: no-repeat;
    }
    .olControlCustomNavToolbar .olControlDrawPolygonItemInactive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/draw_polygon_off.png") !important;
        background-repeat: no-repeat;
    }
    .olControlCustomNavToolbar .olControlZoomBoxItemActive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/drag-rectangle-off.png") !important;
        background-repeat: no-repeat;
    }
    .olControlCustomNavToolbar .olControlZoomBoxItemInactive{
        width:24px !important;
        height:24px !important;
        margin:3px 0px 0px 6px !important;
        background-image: url("/OpenLayers-2.11/theme/default/img/drag-rectangle-on.png") !important;
        background-repeat: no-repeat;
    }

Может ли кто-нибудь дать небольшое представление о том, что я здесь делаю неправильно? Спасибо

РЕДАКТИРОВАТЬ: К вашему сведению Это прекрасно работает в Firefox, Chrome и Opera. Только IE имеет эту проблему.

РЕДАКТИРОВАТЬ: Извините, я сделал ошибку, я работал с IE7 совместимым; перефразируя после снятия тега: meta http-экв = "X-UA-совместимый" контент = "IE = EmulateIE7" он отлично работает в IE9.

В качестве альтернативы НЕ работает в режиме IE7 или IE8, если у кого-то есть идеи, все еще ищущие, как это работает в IE7 и IE8. Спасибо, извините за путаницу.

Answer 1

FYI IE9 умрет, если это используется:

map.layers [J]. прото .CLASS_NAME

Используйте это вместо этого, и вы в порядке:

map.layers [J] .CLASS_NAME

Answer 2

В вашем классе OpenLayers.Control.CustomNavToolbar массив параметров this.addControls содержит завершающую запятую.