`

DIV+CSS浏览器兼容在IE6、IE7、Firefox下识别规则和实例

阅读更多
本文和大家重点讨论一下在IE6、IE7、Firefox下的DIV+CSS网页布局的注意问题,相信本文介绍一定会让你有所收获。

在IE6、IE7、Firefox下的DIV+CSS网页布局的注意问题

DIV+CSS浏览器兼容问题一直困绕着许多从事DIV+CSS网页排版的美工人员,尤其是IE与火狐的兼容.用DIV+CSS布局的网页在IE下显示一切正常,可是在火狐(FireFox)浏览器里打开,本来好好网页一下子就全乱了.让人怎么看?这一定会影响到你的网站的推广,seo优化,不利于搜所引擎的搜索.所以解决DIV+CSS浏览器兼容的问题是完全必须的。

下面来看一下DIV+CSS浏览器兼容的实例,区分IE6,IE7,firefox火狐浏览器CSS的写法,先来分开区分一下。

◆首先声明DIV+CSS浏览器兼容性IE6与IE7与火狐(firefox)的一些识别规则:

1.IE都能识别*;标准浏览器(如Firefox)不能识别*;

2.IE6能识别*,但不能识别!important,

3.IE7能识别*,也能识别!important;

4.firefox不能识别*,但能识别!important;

◆请看下简单的DIV+CSS浏览器兼容实例:

1.IE6和firefox的区别:

background:orange;*background:blue;
意思就是火狐浏览器的背景颜色是橙色,而IE浏览器的背景色是蓝色.

2.IE6和IE7的区别:

background:green!important;background:blue;
意思指的是:IE7的背景颜色是绿色,IE6的背景颜色是蓝色

3.区别IE7与Firefox:

background:orange;*background:green;
意思指的是:火狐浏览器的背景颜色是橙色,而IE7的背景颜色是绿色

4.Firefox,IE7,IE6:
background:orange;*background:green!important;*background:blue;
意思是火狐浏览器的的背景橙色,IE7浏览器的背景颜色是绿色,而IE6浏览器的颜色是蓝色.

为了更加清楚的来表达说明DIV+CSS浏览器兼容下面表格是更加清楚的能表达IE6,IE7,Firefox之间的识别标识区别:

         IE6          IE7          Firefox

*          √           √              ×

important  ×            √            √

_(下划线)  √            ×            ×

【注::不管是什么方法,书写的顺序都是Firefox的写在前面,IE7的写在中间,IE6的写在最后面。】
分享到:
评论

相关推荐

    javaOO总结(DIV+CSS浏览器兼容方法的总结)

    压缩包内的“DIV+CSS浏览器兼容方法的总结.doc”文件很可能是篇详细的教程,涵盖了如何处理常见浏览器(如IE、Firefox、Chrome、Safari等)之间的CSS差异,包括但不限于浮动布局、定位、边距重叠、盒模型差异、透明...

    IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例

    尤其是在处理旧版Internet Explorer(如IE6、IE7、IE8)与现代浏览器(如Firefox、Chrome等)之间的样式差异时,CSS Hack技巧成为了必不可少的工具。本文将深入探讨不同浏览器兼容性的CSS Hack代码及其实例,帮助...

    DIV+select美化支持IE6 IE7 火狐(门户搜索)觉得兼容

    标题中的“DIV+select美化支持IE6 IE7 火狐(门户搜索)觉得兼容”指的是一项网页设计技术,主要是针对HTML中的`<div>`元素和`<select>`下拉菜单进行美化,并确保在不同浏览器,特别是老旧的Internet Explorer(IE6...

    DIV+CSS 学习资料chm

    "如何在一台电脑同时安装IE6、IE7、FF2、FF3.mht"文件提供了在一台计算机上安装多个不同版本的Internet Explorer和Firefox浏览器的指南。这对于测试网站的跨浏览器兼容性至关重要,因为不同的浏览器对CSS的支持程度...

    2天 DIV+CSS

    - **FireFox**:除了作为日常使用的浏览器之外,其开发者工具也非常适合进行网页调试。 通过以上内容的学习和实践,相信在短短的两天内,你就能够掌握XHTML+CSS布局页面的基本技能,并为进一步深化学习打下坚实的...

    灰色企业div+css模板.zip

    8. **浏览器兼容性**:为了保证广泛的用户群体都能正常访问,模板的CSS和HTML代码需要考虑浏览器兼容性,确保在主流浏览器(如Chrome、Firefox、Safari、Edge等)上运行无误。 9. **SEO优化**:一个良好的企业网站...

    div+css网页标准布局企业项目实例

    【网页布局原理与Div+CSS基础】 网页布局是构建网页设计的重要组成部分,它...通过这个企业级项目实例,我们可以深入理解`Div+CSS`布局的原理,掌握网页设计的基本技巧,从而能够创建更加专业、美观和功能完善的网站。

    web浏览器兼容

    由于各浏览器解析HTML和CSS的方式存在差异,导致同一份代码在Firefox、IE7、IE6等浏览器中可能表现出不同的效果,这为开发者带来了挑战。在进行网页设计,尤其是采用DIV+CSS布局时,必须考虑各个浏览器之间的兼容性...

    div+css有实例,易学易懂

    - **非浮动内容和容器的问题**:在IE6和Firefox2下的差异。 - **使用:after伪类解决浮动的问题**:在不同浏览器中的表现。 - **嵌套元素宽度和高度叠中的问题**:子元素对父元素的影响。 - **子元素负边界的问题**:...

    底部固定悬浮工具栏jQuery代码兼容ie6+主流浏览器

    "底部固定悬浮工具栏jQuery代码兼容ie6+主流浏览器"这个资源提供了这样一个功能的实现,适用于多种浏览器环境,包括Internet Explorer 6到9以及Chrome和Firefox。 jQuery是一款广泛使用的JavaScript库,简化了...

    兼容各种浏览器的带透明蒙版透明弹窗效果

    兼容谷歌、火狐、IE7.0以上版本的所有浏览器的透明边框弹窗,带半透明蒙版,参考购物网站实例制作

    CSS兼容规则 CSS兼容

    - 在处理边距(margin)、填充(padding)、宽度(width)等属性时,需要注意IE和Firefox等浏览器之间的差异,特别是在使用`!important`声明时。 4. **布局问题**: - 浮动元素(float)可能导致布局异常,通常...

    HTML5+CSS3实例 :3D立方体旋转

    此外,为了在不同浏览器间保持兼容性,可能需要引入前缀 `-webkit-`、`-moz-`、`-ms-` 和 `-o-` 来支持Chrome、Firefox、IE和Opera等浏览器。例如,`-webkit-transform` 对应于Chrome和Safari,`-moz-transform` ...

    CSS样式hack,用于兼容多种浏览器

    由于各浏览器(如IE6、IE7、Firefox等)对CSS标准的支持程度不同,开发者常常需要采用特定的方法来确保网页在不同浏览器下的表现一致。本文将详细介绍几种常见的CSS Hack方法及其应用场景。 #### 二、CSS Hack常用...

    网页漂浮代码,兼容IE ,firefox

    在本案例中,提供的“漂浮代码”已经过优化,兼容Internet Explorer(IE)和Firefox,这两款浏览器在过去的互联网环境中占据了重要地位,尤其是IE,尽管现在已被Edge取代,但在某些场合仍有用户在使用。 要实现跨...

    CSS hack技巧大全

    在这个例子中,所有浏览器首先会看到`background-color:#f1ee18`,然后IE6、7、8会覆盖为`#00deff`,IE6和IE7会进一步变为`#a200ff`,最后,只有IE6会识别`_background-color`,显示为`#1e0bd1`。 **Hack应用情境...

    css+div圆角窗口

    CSS3的`border-radius`在现代浏览器中得到了广泛支持,包括Chrome、Firefox、Safari、Opera和Internet Explorer9及以上版本。对于IE8及以下版本,可能需要使用JavaScript库如jQuery的`.corner()`插件或CSS3PIE这样...

    DIV+CSS实现仿DreamWeaver界面图形菜单效果代码

    这是一款DIV+CSS实现的图形菜单仿DreamWeaver效果,做了兼容性处理,火狐和IE都无Bug了。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/div-css-f-dreamweaver-pic-menu-codes/ 具体代码...

Global site tag (gtag.js) - Google Analytics