`

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

阅读更多
浏览器之间的兼容是个问题,而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
  • 下载次数: 4
2
0
分享到:
评论
1 楼 playfish 2008-04-21  
原本对于hack也有学习,但是总觉得不好用,写很麻烦。我觉得使用js来完成是最好的方式。目前用过的jbrowser就不错,jquery的一个插件。在页面上引入这个js后,不同浏览器的css只要.ie6 #id  .mozina ..class就可以了。脚本里面直接if(jbrowser.ie)。这种方式最轻松安逸,完全不需要记忆任何的hack。。

相关推荐

    javascript基础教程

    ### JavaScript基础教程知识点详解 #### 一、JavaScript简介与历史沿革 JavaScript 是一种轻量级的、解释型的编程语言,最初由 Netscape 公司于 1995 年开发,其前身名为 Livescript。随着 Java 编程语言的兴起,...

    JavaScript基础语法.pdf

    "JavaScript基础语法详解" JavaScript基础语法是JavaScript语言的核心部分,包括ECMAScript的基础语法、DOM文档对象模型和BOM浏览器对象模型等。JavaScript是一种具有面向对象能力的、解释型的程序设计语言,主要...

    JSP语法详解 基础资料 参考 必备

    一个JSP文件由静态内容(如HTML、CSS、JavaScript)和动态内容(Java代码)组成。静态内容主要是HTML结构,用于定义页面布局和样式;动态内容则包含JSP指令、表达式、脚本元素和动作元素。 **2. JSP注释方式** - *...

    JSP语法详解(基本构成和语句的写法)

    例如,HTML标签 `&lt;html&gt;`, `&lt;head&gt;`, `&lt;body&gt;`等,以及CSS和JavaScript代码都属于模板元素。 ### 3. 脚本元素 脚本元素是JSP中的可执行Java代码,包括以下三种类型: - **声明**:`! 声明变量、方法或内部类 %&gt;`...

    w3school JavaScript教程(v1.0)

    - **DHTML CSS 与 DOM**:DHTML(Dynamic HTML)结合了 HTML、CSS 和 JavaScript,提供了动态更新网页内容的能力。 #### E4X 教程 - **E4X 怎么做与为什么**:E4X 是 ECMAScript for XML 的缩写,是一种在 ...

    css3-mediaqueries.js 下载

    《CSS3媒体查询库——css3-mediaqueries.js详解》 在网页设计中,CSS3的媒体查询(Media Queries)是一项强大的技术,它允许我们根据设备的特性,如屏幕尺寸、分辨率、颜色深度等,来应用不同的样式。然而,老版本...

    《Web前端开发从入门到精通》.pdf

    本资源摘要信息涵盖了Web前端开发的所有知识点,从HTML基础课程到JavaScript高级实战,涵盖了CSS基础课程、jQuery实战、常用库和前端框架、HTML5新功能和高级机制、CSS3新特性详解、实战案例等内容。 HTML基础课程...

    javascript图片完全固定在左、右、上、下,兼容IE6

    - **`_top: expression`**:这是一个 IE6/7 特有的写法,使用 JavaScript 表达式来动态计算元素的顶部位置。这里通过获取 `document.documentElement.scrollTop` 的值来实现随着页面滚动而自动调整位置的效果。 - **...

    最全的CSS浏览器兼容问题

    【CSS浏览器兼容问题详解】 在Web开发中,CSS(层叠样式表)是用于控制网页元素样式的关键技术,但不同的浏览器对其支持程度不一,尤其是老版本的IE(Internet Explorer)浏览器,如IE7和IE6,它们经常会出现一些...

    WEB前端开发.pdf

    - **解释**: CSS Expressions是在CSS中使用JavaScript表达式的一种方式,但在IE浏览器中它们会影响页面渲染性能。 - **替代方案**: 使用纯CSS或JavaScript来实现相同的效果,避免使用CSS Expressions。 **5. 让脚本...

    最全的CSS浏览器兼容问题整理

    【CSS浏览器兼容问题详解】 在Web开发中,CSS(层叠样式表)是用于控制网页布局和样式的语言。然而,不同的浏览器对CSS的支持程度和解析方式可能存在差异,导致兼容性问题。以下是一些常见的CSS在不同浏览器,尤其...

    css浏览器兼容

    ### CSS浏览器兼容性详解 #### 一、引言 随着Web技术的发展,浏览器之间的差异性逐渐成为前端开发者不得不面对的问题之一。特别是在CSS方面,不同浏览器对CSS的支持程度和解析方式存在差异,导致同样的代码在不同...

    html5新特性整理文档

    - HTML5音频元素指南:[http://www.w3school.com.cn/html5/html_5_audio.asp](http://www.w3school.com.cn/html5/html_5_audio.asp) - HTML5视频元素指南:[http://www.w3school.com.cn/html5/html_5_video.asp]...

    WEB数据库复习题.doc.deflate.doc

    15. **response.setContentType()**:此方法用于设置HTTP响应的内容类型,常见的值包括"text/html"(HTML)、"application/msword"(Word文档)、"image/jpeg"(JPEG图片)。参数`s`可以根据实际需求设置各种MIME...

    qml杂记 Qt_Quick中文手册.pdf

    此外,掌握一些HTML和CSS的基础知识也有助于加深对QML的理解。 #### 四、QML语言基础 QML的基本结构由对象、属性和表达式组成。对象定义了界面的组件类型,而属性则描述了组件的具体特性。例如,下面的QML代码定义...

    不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码

    ### 不用JS多浏览器兼容纯DIV/CSS对联漂浮广告代码详解 #### 一、引言 在早期Web开发中,实现某些交互效果时往往需要兼顾多种浏览器的支持情况,尤其是针对IE6、IE7这类老旧浏览器。本文将详细介绍一个无需...

    js表单验证小项目注释版.rar

    **表单验证小项目注释版详解** 在这个项目中,我们可以看到以下几个关键部分: 1. **HTML 结构**:定义了包含各种输入类型的表单元素,如文本输入、密码输入、电子邮件输入等,以及提交按钮。 2. **CSS 样式**:为...

Global site tag (gtag.js) - Google Analytics