首页 > 代码库 > YUI3在IE8下的几个兼容性问题

YUI3在IE8下的几个兼容性问题

2024-07-07 21:37:37   227人阅读

最近项目实施，IE11下正常的东西在IE8下出了几个问题，甚至其他浏览器都没有的问题，用户大多使用IE8，没办法，只好为IE8做修正

其中之一：

YUI3的datatable一显示引发IE8浏览器自动进入兼容性模式并刷新页面，在兼容性模式下，CSS很糟糕，而且datatable完全浮动着，显示很不成样子

查了半天，是如下一句话造成的：

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

这个功能是当用户进行了选择时，要重置表列的内容但这个重置的过程不知道哪里CSS有问题，IE8不兼容

解决办法每当要重置表列时删除掉表重建好了

        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，并重新添加代理

第二个问题就很无奈了，脚本里有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 onm ousemove = 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());
        }
    }

tooltip的写法还是从yui官方demo里抄过来的，结果在IE11，firefox以及众多各种浏览器下都正常，偏偏IE8下除了第一排数据显示正常，第二排后面的都不正常

在F12里调试了一下，原来是pageX和pageY的问题，主要是pageY，第二排开始的数据pageY都老大老大的，导致tooltip不知道飞哪里去鸟

这个么，也就不解释了，直接把pageX和pageY改成clientX和clientY就解决了，两个有什么不同自己理解下就好了

最后一个是小问题，IE8不支持opacity......

把opacity: 0.5下再给IE8加个

    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);

 


联系
我们