YUI3在IE8下的幾個兼容性問題

時間 2019-12-11

標籤 yui3 yui ie8 幾個兼容性問題欄目 JavaScript 简体版

原文原文鏈接

最近項目實施，IE11下正常的東西在IE8下出了幾個問題，甚至其餘瀏覽器都沒有的問題，用戶大多使用IE8，沒辦法，只好爲IE8作修正node

其中之一：ajax

YUI3的datatable一顯示引起IE8瀏覽器自動進入兼容性模式並刷新頁面，在兼容性模式下，CSS很糟糕，並且datatable徹底浮動着，顯示很不成樣子瀏覽器

查了半天，是以下一句話形成的：app

sptable.set('columns', spcolumns.concat(eval(data.header)));ui

這個功能是當用戶進行了選擇時，要重置表列的內容但這個重置的過程不知道哪裏CSS有問題，IE8不兼容this

解決辦法每當要重置表列時刪除掉表重建好了spa

        sptable.detachAll();
        Y.one('#spectrumlistsection #spectrumtable').setHTML('');
        sptable = new Y.DataTable({
            columns: spcolumns.concat(eval(data.header)),
            scrollable: 'x',
            height: '500px',
            width: '100%',
            data: []
        }).render('#spectrumlistsection #spectrumtable');
        sptable.delegate('click', function(e) {
            var code = this.getRecord(e.target).get('code');
            showPartDetail(code);
        }, 'a.partdetail', sptable);

首先將表上的代理所有清掉，而後把表區域置空，接着建立一個新的datatable，並從新添加代理firefox

第二個問題就很無奈了，腳本里有IE8不支持的CSS選擇器代理

var nodelist = bpdiv.one('.search-filter').all('input[type=radio]:checked');調試

這個應該是CSS3的寫法，惋惜IE8不支持，只好改爲

        var nodelist = bpdiv.one('.search-filter').all('input[type=radio]');
        nodelist.each(function(k, v) {
            if (k.get('checked') && k.get('value') != '') {
                。。。。。。
            }
        });

第三個是浮動提示，當鼠標移動到信息上時出現tooltip，tooltip裏的數據隱藏在信息的hint span裏，若是沒有則經過ajax去獲取

    var onMousemove = function(e) {
        if (tooltip.get('visible') === false) {
            Y.one('#tooltip').setStyle('opacity', '0');
            tooltip.move([(e.pageX+ 10), (e.pageY + 20)]);
        }

        var node = e.currentTarget;
        var hintnode = node.one('.hint');
        var code = node.one('.partcode').getHTML();
        if (hintnode == null) {
            var configuration = {
                method: 'POST',
                sync: true,
                data: { code: code, method: 'gethint' },
                on: {
                    complete: function(o) {
                        hintnode = Y.Node.create('<span class="hint hidden"></span>');
                        hintnode.setHTML(o.data.responseText);
                        node.appendChild(hintnode);
                    }
                }
            };
            var io = new Y.IO({ emitFacade: true, bubbles: true });
            io.send('Search.ashx', configuration);
        }

        if (hintnode.getHTML() == '') {
            return;
        }
        if (waitingToShow === false) {
            setTimeout(function() {
                Y.one('#tooltip').setStyle('opacity', '1');
                tooltip.show();
            }, 500);

            waitingToShow = true;
            tooltip.setStdModContent('body', hintnode.getHTML());
        }
    }