【技术帖】IE6所有标签元素支持hover伪类的解决方案
2012-05-29 16:32
435 查看
IE6是个顽皮的大爷。为了实现一些简单的效果,我们通常要做许多事情。比如li:hover ,td :hover这些东西,IE6向来不看。
解决办法网上有许多,亲试了许多,只有以下才能解决,就是加一个tc文件就可以了!!
步骤:
1.在你的网页的同级目录下创建一个叫做iehoverfix.htc的文件,并在里面复制进去如下内容
iehoverfix.htc文件内容:---------------------------------------------------此行不复制----------------------------------------------/*解决ie6.0 的hover兼容问题*/<attach event=”ondocumentready” handler=”parseStylesheets” /><script>var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,currentSheet, doc = window.document, hoverEvents = [], activators = {onhover:{on:’onmouseover’, off:’onmouseout’},onactive:{on:’onmousedown’, off:’onmouseup’}}function parseStylesheets() {if(!/MSIE (5|6)/.test(navigator.userAgent)) return;window.attachEvent(‘onunload’, unhookHoverEvents);var sheets = doc.styleSheets, l = sheets.length;for(var i=0; i<l; i++)parseStylesheet(sheets[i]);}function parseStylesheet(sheet) {if(sheet.imports) {try {var imports = sheet.imports, l = imports.length;for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);} catch(securityException){}}try {var rules = (currentSheet = sheet).rules, l = rules.length;for(var j=0; j<l; j++) parseCSSRule(rules[j]);} catch(securityException){}}function parseCSSRule(rule) {var select = rule.selectorText, style = rule.style.cssText;if(!csshoverReg.test(select) || !style) return;var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, ‘on$1′);var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, ‘.$2′ + pseudo);var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];var affected = select.replace(/:(hover|active).*$/, ”);var elements = getElementsBySelect(affected);if(elements.length == 0) return;currentSheet.addRule(newSelect, style);for(var i=0; i<elements.length; i++)new HoverElement(elements[i], className, activators[pseudo]);}function HoverElement(node, className, events) {if(!node.hovers) node.hovers = {};if(node.hovers[className]) return;node.hovers[className] = true;hookHoverEvent(node, events.on, function() { node.className += ‘ ‘ + className; });hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp(‘\\s+’+className, ‘g’),”); });}function hookHoverEvent(node, type, handler) {node.attachEvent(type, handler);hoverEvents[hoverEvents.length] = {node:node, type:type, handler:handler};}function unhookHoverEvents() {for(var e,i=0; i<hoverEvents.length; i++) {e = hoverEvents[i];e.node.detachEvent(e.type, e.handler);}}function getElementsBySelect(rule) {var parts, nodes = [doc];parts = rule.split(‘ ‘);for(var i=0; i<parts.length; i++) {nodes = getSelectedNodes(parts[i], nodes);} return nodes;}function getSelectedNodes(select, elements) {var result, node, nodes = [];var identify = (/\#([a-z0-9_-]+)/i).exec(select);if(identify) {var element = doc.getElementById(identify[1]);return element? [element]:nodes;}var classname = (/\.([a-z0-9_-]+)/i).exec(select);var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, ”);var classReg = classname? new RegExp(‘\\b’ + classname[1] + ‘\\b’):false;for(var i=0; i<elements.length; i++) {result = tagName? elements[i].all.tags(tagName):elements[i].all;for(var j=0; j<result.length; j++) {node = result[j];if(classReg && !classReg.test(node.className)) continue;nodes[nodes.length] = node;}}return nodes;}</script>---------------------------------------------------此行不复制----------------------------------------------2.使用css导入iehoverfix.htc文件:
<style type="text/css">
body{
behavior:url(ie6hover.htc);
}
</style>
3.刷新一下页面,看看效果吧。li:hover 什么的全部都解决啦
解决办法网上有许多,亲试了许多,只有以下才能解决,就是加一个tc文件就可以了!!
步骤:
1.在你的网页的同级目录下创建一个叫做iehoverfix.htc的文件,并在里面复制进去如下内容
iehoverfix.htc文件内容:---------------------------------------------------此行不复制----------------------------------------------/*解决ie6.0 的hover兼容问题*/<attach event=”ondocumentready” handler=”parseStylesheets” /><script>var csshoverReg = /(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i,currentSheet, doc = window.document, hoverEvents = [], activators = {onhover:{on:’onmouseover’, off:’onmouseout’},onactive:{on:’onmousedown’, off:’onmouseup’}}function parseStylesheets() {if(!/MSIE (5|6)/.test(navigator.userAgent)) return;window.attachEvent(‘onunload’, unhookHoverEvents);var sheets = doc.styleSheets, l = sheets.length;for(var i=0; i<l; i++)parseStylesheet(sheets[i]);}function parseStylesheet(sheet) {if(sheet.imports) {try {var imports = sheet.imports, l = imports.length;for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);} catch(securityException){}}try {var rules = (currentSheet = sheet).rules, l = rules.length;for(var j=0; j<l; j++) parseCSSRule(rules[j]);} catch(securityException){}}function parseCSSRule(rule) {var select = rule.selectorText, style = rule.style.cssText;if(!csshoverReg.test(select) || !style) return;var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, ‘on$1′);var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, ‘.$2′ + pseudo);var className = (/\.([a-z0-9_-]*on(hover|active))/i).exec(newSelect)[1];var affected = select.replace(/:(hover|active).*$/, ”);var elements = getElementsBySelect(affected);if(elements.length == 0) return;currentSheet.addRule(newSelect, style);for(var i=0; i<elements.length; i++)new HoverElement(elements[i], className, activators[pseudo]);}function HoverElement(node, className, events) {if(!node.hovers) node.hovers = {};if(node.hovers[className]) return;node.hovers[className] = true;hookHoverEvent(node, events.on, function() { node.className += ‘ ‘ + className; });hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp(‘\\s+’+className, ‘g’),”); });}function hookHoverEvent(node, type, handler) {node.attachEvent(type, handler);hoverEvents[hoverEvents.length] = {node:node, type:type, handler:handler};}function unhookHoverEvents() {for(var e,i=0; i<hoverEvents.length; i++) {e = hoverEvents[i];e.node.detachEvent(e.type, e.handler);}}function getElementsBySelect(rule) {var parts, nodes = [doc];parts = rule.split(‘ ‘);for(var i=0; i<parts.length; i++) {nodes = getSelectedNodes(parts[i], nodes);} return nodes;}function getSelectedNodes(select, elements) {var result, node, nodes = [];var identify = (/\#([a-z0-9_-]+)/i).exec(select);if(identify) {var element = doc.getElementById(identify[1]);return element? [element]:nodes;}var classname = (/\.([a-z0-9_-]+)/i).exec(select);var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, ”);var classReg = classname? new RegExp(‘\\b’ + classname[1] + ‘\\b’):false;for(var i=0; i<elements.length; i++) {result = tagName? elements[i].all.tags(tagName):elements[i].all;for(var j=0; j<result.length; j++) {node = result[j];if(classReg && !classReg.test(node.className)) continue;nodes[nodes.length] = node;}}return nodes;}</script>---------------------------------------------------此行不复制----------------------------------------------2.使用css导入iehoverfix.htc文件:
<style type="text/css">
body{
behavior:url(ie6hover.htc);
}
</style>
3.刷新一下页面,看看效果吧。li:hover 什么的全部都解决啦
相关文章推荐
- ie6不支持hover ie6 标签(除a标签)不支持伪类:hover解决方案
- IE6不支持<a>标签以外元素的hover的解决方案
- 使ie6 支持:hover等伪类
- IE6:支持非a标签的hover属性
- 关于IE6下a标签的a:hover伪类失效的问题
- 关于CSS在IE6以下浏览器不支持:hover伪类的解决方式
- IE6:支持非a标签的hover属性
- IE6不支持非A元素:hover伪类的bug的处理
- 让IE6支持非a标签的hover属性
- 让IE6支持hover伪类效果
- IE6下hover伪类显示隐藏子元素bug及解决方案
- IE6不支持hover解决方案
- HTML“pre”标签 :用pre元素可定义预先格式文字。所有在pre元素内文字的空白间隔以及换行都会被保留。
- 复制所有读/写标签属性到指定元素。
- 让IE(包括IE6)支持HTML5元素方法–html5.js
- 让IE6也支持hover[JS模拟]
- Selectivizr-让IE6~8支持CSS3伪类和属性选择器
- html 插入多媒体标签元素以及框架技术
- html表格、表单元素、img标签、图像映射技术、html4引入flash
- IE6浏览器不支持固定定位(position:fixed)解决方案