csshover.htc CSS兼容
以下为csshover.htc 内容
<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
var currentSheet, doc = window.document, activators = {
onhover:{on:'onmouseover', off:'onmouseout'},
onactive:{on:'onmousedown', off:'onmouseup'}
}
function parseStylesheets() {
//window.alert("hi");
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(!(/(^|\s)(([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active)/i).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.*$/, '');
var elements = getElementsBySelect(affected);
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;
node.attachEvent(events.on,
function() { node.className += ' ' + className; });
node.attachEvent(events.off,
function() { node.className =
node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
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 classname = (/\.([a-z0-9_-]+)/i).exec(select);
var identify = (/\#([a-z0-9_-]+)/i).exec(select);
var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
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((identify && node.id != identify[1]) || (classname && !(new RegExp('\\b' +
classname[1] + '\\b').exec(node.className)))) continue;
nodes[nodes.length] = node;
}
} return nodes;
}
</script>
--------------------------------------
使用方法
<style type="text/css">
body { behavior: url(csshover.htc); }
</style>
----------------------------------
下面一个小例子，实现 li:hover 在IE6下有效。 测试平台 IETester IE6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
body{ behavior:url("style/csshover.htc");}
ul,li{list-style:none; margin:0; padding:0;}
ul li{width:80px; height:30px; line-height:30px;}
ul li ul {display:none; padding-left:10px;}
ul li:hover ul {display:block;}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">一级菜单</a>
<ul>
<li><a href="#">二级菜单</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
附：JQuery解决方法：
function hoverFunc(select, css){
$(select).hover(
function(){
$(this).addClass(css);
},
function(){
$(this).removeClass(css);
}
)
}
hoverFunc('#bt1', 't1_hover');
hoverFunc('.exp_1', 'exp_1_hover');
csshover.htc CSS兼容的更多相关文章
- CSS兼容各浏览器的hack
CSS兼容各浏览器的hack:建议:尽可能的手写代码,可以有效的提高学习效率和深度.浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定 ...
- 主流浏览器css兼容问题的总结
最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑.主要测试了chrome,fire ...
- CSS兼容问题实用建议
CSS兼容问题,是美工最头痛的问题.做测试时,用谷哥和360浏览器(最新)都没有什么问题,用 IE6/IE8测试,问题就冒出来了.微软现在出IE10,我电脑上已经无法用IE6准确测试,IE-TESTE ...
- css兼容问题集合
css兼容问题 兼容问题 1.文字本身的大小不兼容.同样是font-size:14px的宋体文字,在不同浏览器下占的空间是不一样的,ie下实际占高16px,下留白3px,ff下实际占高17px,上留白 ...
- css兼容各个浏览器的三角形图标
css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...
- CSS兼容常用技巧
请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和 ...
- ie6 7 8 9 firefox的css兼容问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css兼容问题与实践归纳总结
css兼容问题与实践归纳总结 一.IE6/7 原生块元素与display:inline-block; <div style="display:inline-block;"&g ...
- 浏览器 CSS 兼容写法的测试总结
做前端最讨厌的就是 IE6,7,8,虽然被淘汰的浏览器,但是在中国用户仍然很多,不可能像国外网站一样直接就不管它了,这样会流失很多流量啊. 现在有了IE9,IE10还好些,几乎和 Chrome,Fir ...
随机推荐
- php中环境变量
$_ENV $_ENV是一个包含服务器端环境变量的数组.它是PHP中一个超级全局变量,我们可以在PHP 程序的任何地方直接访问它. $_ENV只是被动的接受服务器端的环境变量并把它们转换为数组元素 ...
- empty isset
1.当变量未定义时,is_null()和"参数本身"是不允许作为参数判断的,会报Notice警告错误: 2.empty,isset首先都会检查变量是否存在,然后对变量值进行检测.而 ...
- System.map文件【转】
转自:http://blog.csdn.net/david104/article/details/7194185 当运行GNU链接器gld(ld)时若使用了"-M"选项,或者使用n ...
- win10 使用docker
新手 win10 下使用docker 1:下载docker for win 2:查看docker使用文档 https://github.com/widuu/chinese_docker 3 : 下载镜 ...
- IOS OC数据类型
1.只有浮点型数据除以0.0才能得到+-无穷大的数,而整形或char型数据会得到边界值 2.BOOL的实际类型是signed char,他的底层只占一个字节(只有八位),如果将一个较大的非零整数值赋给 ...
- EF连接ORACLE
1.nuget引用Oracle.ManagedDataAccess.EntityFramework的dll文件 2.安装Oracle Developer Tools for Visual Studio ...
- Nudnik Photographer -Ural1260动态规划
Time limit: 1.0 second Memory limit: 64 MB If two people were born one after another with one second ...
- Fragment全解析系列（三）：Fragment之我的解决方案：Fragmentation
源码地址:Github,欢迎Star,Fork. Demo网盘下载(V_0.7.13)Demo演示:单Activity + 多Fragment,项目中有3个Demo. 流式的单Activity+多Fr ...
- 使用Python结合Face++ API识别人脸
Face++是北京旷视科技旗下的视觉服务平台,可以进行人脸识别.检测等功能.其人脸识别技术据悉在目前准确率较高,其API非常友好,免费使用,功能众多,而且调用几乎没有限制.这里我使用了Python调用 ...
- [OC]UILabel 文字长的截断方式
Tip: 参考文档:http://blog.csdn.net/reylen/article/details/21012859 @property(nonatomic) NSLineBreakMode ...