最近项目实施，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 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());
        }
    }

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);

 

版权声明：本文为zuxOK原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/zuxOK/p/3782327.html