`

网页开发 浏览器间差异

阅读更多

1 、处理的问题是ie6,7无法识别新标签的问题
使用js解决,引入与下js,就可以识别了。

<!--[if lte IE 8]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
2 、html5的新标签无法使用设置css背景

刚开始试的时候,还以为哪出问题了,刚好其中的nav被clearfix修复了,才发现原来是display:block;的问题。
在你的reset.css或其它地方加入相关css解决:

header,nav,article,section,aside,footer{ display:block;}

 

一、通用区分方式:
IE都能识别*,标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important;
IE7能识别*,也能识别 !important;
IE8能识别\0,不能识别*,+,_,*加!important;
FF不能识别*,但能识别 !important;
例如style=”*width:10px!important; width:20px;”,其在IE6下宽度为10px,在IE7下宽度时20px

其中还有如下三种写法:

第一种

width:100px; /* FireFox及其他浏览器 */
width:200px\0; /* IE8能识别\0*/
*width:300px!important; /* ,IE7 既能能识别*号,也能识别important */
*width:400px; /* IE6也能识别*号 */
/*提示:请注意顺序 */


第二种

width:100px; /* FireFox及其他浏览器 */
width:200px\0; /* IE8能识别\0*/
*width:300px; /* IE7也能识别*号 */
_width:400px; /* IE6能识别下划线*/
/*提示:请注意顺序 */


第三种

width:100px; /* FireFox及其他浏览器 */
width:200px\0; /* IE8能识别\0*/
+width:300px; /* +只识别IE7 */
_width:400px; /* IE6能识别下划线*/
/*提示:请注意顺序 */


二、不常见的HACK(OP表示Opera,SA表示Safari),其中第3条比较实用
.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/
.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/
.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/
.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/


三、各种浏览器独立支持的hack
width:100px\0;/* 支持IE8 */
_width:100px; /* 支持IE6 */
[width:100px; /* 支持IE6,7 */
+width:100px; /* 支持IE6,7 */
*width:100px; /* 支持IE6,7 */
*width:100px!important; /* 支持IE6,7, */
*+width:100px; /* 支持IE6,7, */
*+width:100px!important;/* 支持IE6,7, */
width:100px\9; /* 支持IE6,7,8 */
width:100px!important; /* 支持IE6,7,8,FF */
w\idth:100px; /*IE5.x不支持 IE6、IE7、IE8、FF支持 */


四、IE特有的条件注释功能
1.仅IE可见的写法

<!--[if IE]>此处内容只有IE可见<![endif]–>


2.仅IE6可见的写法

<!–[if IE 6.0]>此处内容只有IE6.0可见<![endif]–>


3.仅IE7可见的写法

<!–[if IE 7.0]>此处内容只有IE7.0可见<![endif]–>


4.版本区间可显示写法

<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->


5.非IE可见的写法(注意:此条不符合WEB标准,但的确实用)

<!--[if !IE]>此处内容只非IE可见<![endif]-->

分享到:
评论

相关推荐

    前端标准在各浏览器中的差异

    2. **布局:CSS** - CSS(Cascading Style Sheets)用于定义网页的样式和布局,不同浏览器对于CSS的支持程度和解析方式可能存在差异。 3. **与宿主环境相关的脚本语言:JavaScript** - JavaScript是前端开发中最重要...

    事件模型在各浏览器中存在差异

    在IT领域,尤其是在Web开发中,事件模型是一个关键的概念,用于处理用户与网页交互的响应。W3C DOM 2 Events 规范定义了事件模型,使得任何支持DOM的节点,如HTML元素,都可以成为EventTarget,即可以接收并处理事件...

    app-项目开发手机浏览器

    - **模拟浏览器**:如Opera Mini,使用非标准解析方式,与桌面浏览器体验有较大差异。 - **增强型浏览器**:基于WebView或修改的WebView,提供定制UI和附加功能,易于扩展。 3. **案例与应用** 随着智能手机...

    Android浏览器开发设计

    在Android平台上进行浏览器开发是一项复杂而有趣的任务,它涉及到Android系统的基础知识、Java编程语言以及Web相关的技术。本文将深入探讨Android浏览器开发设计的核心概念、关键技术和实现步骤。 首先,我们要理解...

    百度前端开发技术分享 浏览器增强和差异化 共37页.pptx

    同时,可能还会介绍如何利用工具自动处理浏览器差异,以及如何编写可维护和扩展的CSS3代码。 总结起来,这个分享主要关注了CSS3在前端开发中的应用,以及如何通过增强开发工具和策略来克服浏览器的限制,实现跨...

    WEB前端标准在各浏览器中的差异.zip_web标准_浏览器

    7. **渐进增强与优雅降级**:前端开发策略中,渐进增强意味着为所有浏览器提供基本功能,然后逐步添加高级特性给支持它的浏览器。优雅降级则是先为最新浏览器设计,再回退到对旧浏览器的基本支持。 8. **响应式设计...

    如果开发兼容各种浏览器的网页.pdf

    为了开发兼容各种浏览器的网页,开发者需要了解不同浏览器所使用的渲染引擎和浏览器特有的特性。文档中提到的Mozilla Firefox使用Gecko引擎,Internet Explorer使用Trident引擎,Opera最初使用Presto引擎,后来切换...

    网页声音播放(支持多种浏览器)

    网页声音播放技术是现代网页开发中的一个重要组成部分,它允许开发者在网页中集成音频元素,为用户提供更加丰富的交互体验。本文将深入探讨如何实现一个跨浏览器的声音播放功能,并以"网页声音播放(支持多种浏览器...

    浏览器兼容

    浏览器兼容性是IT领域中的一个重要话题,特别是在网页开发和用户体验设计中。这个主题涉及到不同的网络浏览器如何处理相同的HTML、CSS、JavaScript代码以及Web标准的实现差异。以下是对这个主题的详细解析: 首先,...

    易语言制作的9款浏览器源码

    总结来说,"易语言制作的9款浏览器源码"是一个宝贵的教育资源,它涵盖了易语言编程、浏览器开发等多个领域的知识,无论是新手还是资深开发者,都能从中获益匪浅。通过深入研究和实践,你可以提升自己的编程技能,...

    js开发时钟(浏览器兼容)

    在JavaScript开发中,创建一个实时更新的时钟是一项常见的任务,尤其在网页应用中。这个“js开发时钟(浏览器兼容)”项目旨在实现一个能在不同浏览器上正常运行的时钟功能。博主Sailinglxg在ITEYE博客上分享了相关的...

    VC++ 打造网页浏览器

    同时,考虑到不同用户可能使用的浏览器版本差异,应确保兼容性。 总结来说,"VC++ 打造网页浏览器"是一个涉及MFC、ActiveX控件以及HTTP协议的项目,它涵盖了从基础的界面设计到复杂的网络通信技术。通过学习和实践...

    web 浏览器兼容工具

    这类工具能够帮助我们分析不同浏览器之间的样式差异,提供解决兼容性问题的代码或建议,从而确保网站在各种主流浏览器上都能正常工作。 首先,我们需要理解浏览器兼容性问题的来源。主要问题通常出在以下几个方面:...

    浏览器兼容测试工具

    这就需要开发者在设计网页时考虑到各种浏览器的差异,以确保广泛兼容。 浏览器兼容测试工具的出现,极大地简化了这一过程。这些工具通常提供模拟不同浏览器环境的功能,允许开发者在一个统一的平台上测试其代码在多...

    IE多版本浏览器

    - 使用【IE多版本浏览器】工具,开发者可以在同一台计算机上方便地切换不同版本的IE,快速检测和调试页面在各版本下的表现,确保网站在老用户和使用旧版浏览器的用户群体中正常运行。 3. **开发和调试工具**: - ...

    各浏览器默认的css

    2. **使用CSS重置或Normalize.css**:这些工具可以消除浏览器间的样式差异,提供一个统一的基础,使得开发者在编写CSS时有一个更一致的起点。 3. **测试和调试**:使用浏览器的开发者工具检查元素的计算样式,确保...

    浏览器兼容性解决方法

    在Web开发中,确保网站在不同浏览器上表现一致是一项挑战。本篇文章将基于提供的文件信息,深入探讨浏览器兼容性的解决方法,尤其针对Firefox、IE等主流浏览器进行详细分析。 #### 1. CSS Hack技巧 在CSS中,...

    不同浏览器之间路径问题Demo

    "不同浏览器之间路径问题Demo"这个实例就是专门针对这一主题展开的,旨在帮助开发者理解并解决因浏览器差异导致的路径问题。下面我们将详细探讨相关的知识点。 1. **浏览器差异**: 浏览器之间的差异主要源于它们...

    TD 单独 浏览器

    在早期的Web开发中,由于浏览器之间的差异,尤其是IE8及更早版本对HTML和CSS标准的支持不足,开发者常常会遇到兼容性挑战。TD是HTML表格中的一个单元格元素,用于组织和展示数据。 描述部分提到,“td不兼容于IE8”...

    所有浏览器版本信息查询

    浏览器版本信息查询是一个常见但非常实用的需求,尤其在开发者调试网页兼容性问题时。这个小脚本虽然技术含量不高,但对于非专业人士或者开发者来说,它提供了一个简单易用的途径来获取自己的浏览器版本信息。接下来...

Global site tag (gtag.js) - Google Analytics