标签：style class blog code java http
最近项目实施，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);
YUI3在IE8下的几个兼容性问题,布布扣,bubuko.com
标签：style class blog code java http
原文地址：http://www.cnblogs.com/zuxOK/p/3782327.html
