2008-04-20

html/javascript/css 注释表达式详解

关键字: css hack, ie
浏览器之间的兼容是个问题，而IE的兼容性尤其严重。下面是我搜集的一些处理html/js/css兼容性问题的好方法。

html 条件注释 
<html>
<body>
<!--[if IE]>
根据条件判断，这是Internet Explorer<br />
<![endif]-->
<!--[if IE 5]>
根据条件判断，这是Internet Explorer 5<br />
<![endif]-->
<!--[if IE 5.0]>
根据条件判断，这是Internet Explorer 5.0<br />
<![endif]-->
<!--[if IE 5.5]>
根据条件判断，这是Internet Explorer 5.5<br />
<![endif]-->
<!--[if IE 6]>
根据条件判断，这是Internet Explorer 6<br />
<![endif]-->
<!--[if gte IE 5]>
根据条件判断，这是Internet Explorer 5 或者更高<br />
<![endif]-->
<!--[if lt IE 6]>
根据条件判断，这是版小于6的Internet Explorer<br />
<![endif]-->
<!--[if lte IE 5.5]>
根据条件判断，这是Internet Explorer 5.5或更低<br />
<![endif]-->
</body>
</html>


javascript 编译注释
引用
<script type="text/javascript">
/*@cc_on
document.write('IE 4+ browser support @cc_on<br>');
/*@if (@_jscript_version >= 5)
document.write("IE Browser that supports JScript 5+<br>");
@elif (@_jscript_version >= 4)
document.write("IE Browser that supports JScript 4+<br>");
@else @*/
document.write("Non IE Browser or lower version IE<br>");
/*@end
@*/
</script>


javascript编译常量
http://www.javascriptkit.com/javatutors/conditionalcompile2.shtml

css !important.
!importan 在firefox，ie7中支持，在ie6中不支持。
引用
<div style="color: red !important; color: blue;">
IE7,firefox中显示为红色文字，IE6中显示为蓝色文字
</div>


ie6支持 * html 前缀 ,ie7 支持 *+html 前缀，firefox不支持。
ie支持css expression，在firefox中是不支持的。
引用

#testcss {/*any*/
background-color:red;
}
* html #testcss {/*ie6*/
background-color:green;
}
*+html #testcss {/*ie7*/
background-color:yellow;
}



测试文件见附件。
  • allhack.zip (742 Bytes)
  • 描述: js/css hack
  • 下载次数: 3
评论
playfish 2008-04-21
原本对于hack也有学习，但是总觉得不好用，写很麻烦。我觉得使用js来完成是最好的方式。目前用过的jbrowser就不错，jquery的一个插件。在页面上引入这个js后，不同浏览器的css只要.ie6 #id .mozina ..class就可以了。脚本里面直接if(jbrowser.ie)。这种方式最轻松安逸，完全不需要记忆任何的hack。。
发表评论

您还没有登录，请登录后发表评论

jasongreen
搜索本博客
我的相册
11781fd7-22a6-3502-8b1a-98219460b849-thumb
分形大厦
共 10 张
存档
最新评论