0

現在、iframe を介して Web サイトに埋め込んでいるカレンダー アプリケーションを一緒にハッキングしていますが、Internet Explorer でバグに遭遇しました。

    function BuildListView(startday, l, events, config){
        var cc = '<div id="myGrid" style="width:95%;height:95%;"></div>';
        var html = [];
        html.push(cc);
        html.push('<link rel="stylesheet" href="../slickgrid/slick.grid.css" type="text/css" media="screen" charset="utf-8" /> ');
        html.push('<link rel="stylesheet" href="../slickgrid/css/smoothness/jquery-ui-1.8.2.custom.css" type="text/css" media="screen" charset="utf-8" /> ');
        html.push('<link rel="stylesheet" href="../slickgrid/examples/examples.css" type="text/css" media="screen" charset="utf-8" /> ');

        html.push('<script language="JavaScript" src="../slickgrid/lib/jquery.event.drag-2.0.min.js"></script>');
        html.push('<script language="JavaScript" src="../slickgrid/slick.grid.js"></script>');
        gridcontainer.html(html.join(""));
        html = null;

        var grid;

        var columns = [
            {id:"event", name:"Event", field:"event",width:300},
            {id:"start", name:"Start", field:"start",width:175},
            {id:"finish", name:"Finish", field:"finish",width:175},
            {id:"location", name:"Location", field:"location",width:200}
        ];

        function sortByStart(a, b) {
            var x = a.start.toLowerCase();
            var y = b.start.toLowerCase();
            return ((x < y) ? -1 : ((x > y) ? 1 : 0));
        }

        var options = {
            enableCellNavigation: false,
            enableColumnReorder: false,
            rowCssClasses: function(item) {
                // if a task is 100% done then its row gets an additional CSS class
                return (item.event == "Task 0") ? 'complete' : '';
            }

        };

            $.getJSON("../cal.php", function(json) {
                var data = [];
                var i=0;
                $.each(json.events, function(index, event) { 
                        data[i++] = {
                            event: event[1],
                            start: event[2],
                            finish: event[3],
                            location: event[9],
                        };

                });
                data.sort(sortByStart);

                $.each(data,function(index, value){
                    value.start = (new Date(value.start)).toUTCString();
                    value.finish = (new Date(value.finish)).toUTCString();
                })


                grid = new Slick.Grid($("#myGrid"), data, columns, options);
             });



    }

私が知っている汚い、これはそれ自体で正常にロードされ、FF / Chromeのiframeで正常に機能しますが、IEでは最終呼び出し

grid = new Slick.Grid($("#myGrid"), data, columns, options);

問題を引き起こしています。CSS ファイルをコメントアウトすると同じことが起こるので、読み込み後の CSS エラーだと思います。iframe 内の CSS が変更されるのを止めるにはどうすればよいですか?

4

1 に答える 1

3

DOCTYPEを確認しましたか？一部のDOCTYPEは、FF / Chromeでは標準モードをトリガーしますが、IE8ではQuirksモードをトリガーします。SlickGridはQuirksモードでは機能しません（当然のことながら！）。これを変更することで、非常によく似た問題を修正しました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

これに：

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

詳細については、この記事を参照してください。

于 2011-03-14T09:22:12.177 に答える