【技术帖】IE6所有标签元素支持hover伪类的解决方案

简介: IE6是个顽皮的大爷。为了实现一些简单的效果,我们通常要做许多事情。比如li:hover ,td :hover这些东西,IE6向来不看。   解决办法网上有许多,亲试了许多,只有以下才能解决,就是加一个tc文件就可以了!! 步骤: 1.

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 什么的全部都解决啦

目录
相关文章
IE6下面,为什么不能设置height:1px的元素
在用DIV构建网页的时候,有时候需要的高度很小,这时候就可能会出现问题,因为,IE6下DIV有个默认的高度,大约10-12px。当你试图定义一个高度小于这个默认值的 div 的时候, IE 会固执的认为这个层的高度不应该小于字体的行高。
95 0
|
JavaScript
ie8 ie浏览器下载excel文件乱码,变成压缩包,解决方案
ie8 ie浏览器下载excel文件乱码,变成压缩包,解决方案
226 0
|
Web App开发 JavaScript
设置dom元素可拖动,支持ie5+
设置dom元素可拖动,支持ie5+
IE6下focus与blur错乱的解决方案
Miller同学发现的IE6 bug:如以下代码,点击textarea时,引发window的blur,导致focus与blur配对混乱: hello window.onblur=function(){ document.title= 'blur:' + Math.random() ; } window.onfocus=function(){ document.title= 'focus:' + Math.random() ; } 这应该是一个很常见的需求,例如,当前窗口定期更新数据,而窗口失焦则减少信息更新频率。
735 0
Win2003下Loadrunner9.1 脚本录制时IE出现WIN32异常解决方案
Win2003下Loadrunner9.1 脚本录制时无法自动打开IE 遇到的问题: 每次执行录制脚本时弹出对话框提示:“iexplore.exe […] 中发生未处理的win32异常” 解决方法: (1)“我的电脑”点右键->属性->高级 点选“性能”中的“设置” (2)打开对话框后,进入“数据执行保护”,如果空白框中没有“Internet Export”,请点击“添加”,选择 c:/program files/internet iexplore/iexplore.exe. 完成设置后,问题解决。
773 0
|
Web App开发 JavaScript 前端开发
Vue 兼容 ie9 的全面解决方案
Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本。经过测试,Vue 的核心框架 vuejs 本身,以及生态的官方核心插件(VueRouter、Vuex等)均可以在 ie9 上正常使用。
2428 0
|
前端开发
CSS-自定义高度的元素背景图如何自适应以及after伪类在ie下的处理
我都好久没更新了! 遇到一个效果,之前没有考虑清楚,设置了固定高度,到了后边,产品要加长,我就觉得设计得从新弄张长点的背景图!这不多余么? 其实分析原图还是可以再切分,再细化到不用改设计图,让我们前端页面各种适应,做到重复利用。
1212 0
IE DIV背景透明,点击事件不响应解决方案
IE DIV背景透明,给DIV绑定点击事件,   $("div").bind("click", function(){ alert('click me.'); });     当点击DIV时,不会响应已经绑定的点击事件。
|
Web App开发 移动开发 JavaScript
让所有IE支持HTML5的解决方案
引用:http://blog.bingo929.com/html5-ie-enabling-script.html  自从HTML5能为我们的新网页带来更高效洁净的代码而得到更多的关注,然而唯一能让IE识别那些新元素(如)的途径是使用HTML5 shiv,感谢remy sharp为我们提供了这个迷你脚本来解决IE支持HTML5的问题。
918 0