当前位置:  编程技术>WEB前端

浏览器兼容解决FF/IE6/IE7背景专用CSS HACK

    来源: 互联网  发布时间:2014-09-06

    本文导语:  自从互联网开始的那一刻起,各浏览器间的争斗就没有停止过。当然其中最苦的就是网页制作人员了,为了达到用户体验以及可用性的标准,不得不在多个浏览器上为统一效果而奔波。真希望哪一天FF可以一统天下,虽然现在...

自从互联网开始的那一刻起,各浏览器间的争斗就没有停止过。当然其中最苦的就是网页制作人员了,为了达到用户体验以及可用性的标准,不得不在多个浏览器上为统一效果而奔波。真希望哪一天FF可以一统天下,虽然现在还是IE的大天下。特别是微软最新发布的IE7浏览器,其CSS的兼容性确实给一些网页制作人员又添加了一个沉重的新负担。
为了让各浏览器有同样的显示效果,我们不得不用到CSS HACK。当然在这篇文章中我们只谈现在使用率最高的IE6和FF,以及将来可能会成为主流的IE7的CSS HACK,至于IE6以下版本已OP、SF在这此先不详细说明。新手看了这片文章一定会有所收获,而高手们路过一下就可以了,呵呵!

方案一
先来看看下面的CSS代码:

background-color:orange; 
*background-color:blue!important; 
*background-color:red;
-www. css test .bgc{ width:200px; height:200px; background-color:orange; *background-color:blue!important; *background-color:red; }

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

下面我简单解释一下各浏览器怎样理解这三个属性:
在FF下,第2、3个属性不认识,其中第2个属性如果只是加了!important的话FF一定认识的,但因为前面又加了个*,所以不认识了(仅IE7认识)。所以它读的是background-color:orange;
在IE7下,第1、2、3个属性IE7虽然都认识,但!important表示的是优先,所以它读的是*background-color:blue!important;
在IE6下,第2个属性不认识,第1、3个属性都认识,但因为第3个属性覆盖掉第1个属性,所以IE6最终读取的*background-color:red。

方案二
先来看看下面的CSS代码:
代码如下:

background-color:orange;   
*background-color:blue;   
_background-color:red; 

css test -www. .bgc{ width:200px; height:200px; background-color:orange; *background-color:blue; _background-color:red; }

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

下面我简单解释一下各浏览器怎样理解这三个属性:
在FF下,第2、3个属性FF不认识,所以它读的是background-color:orange;
在IE7下,第3个属性IE7不认识,所以它读第1、2个属性,又因为第2个属性覆盖了第1个属性,所以IE7最终读出的是第2个属性*background-color:blue;
在IE6下,这3个属性IE6都认识,所以3个属性都可以读取,又因为第3个属性覆盖掉前2个属性,所以IE6最终读取的是_background-color:red。

其中IE的读取属性一定要知道,这对初学者而言使用CSS HACK是非常至关重要的,浏览器读取属性是从上至下的,也就是说同样属性的设置最后一个读取到的才是在浏览器上显示的。此外在方案二种的“_”这是只有IE6才认识的,可见其大胃王的感觉。另外!important不同,它打破了从上至下的读取习惯,使用的是优先显示。而在上述两个方案中可以看出FF除了正规CSS书写和!important外其它都不认识,标准就是统一的。

在这里并不是怂恿大家鼓励使用CSS HACK,只是别看到其他人写的CSS代码中有这些HACK不知道是什么意思。毕竟用CSS HACK来解决浏览器间的兼容并不是长远方法,如果新版本浏览器的出现说不定会把你原来写的CSS HACK怎样,IE7就是个很好的例子。尽量达到零使用CSS HACK或者说少使用,因为好的布局结构是可以很好解决这些问题,这样的网站也大有人在。


    
 
 

您可能感兴趣的文章:

  • 通过javascript实现DIV居中,兼容各浏览器版本
  • CSS hack浏览器兼容一览表
  • JSP中用回车监听按钮事件兼容火狐 IE等主流浏览器
  • 处理CSS3跨浏览器兼容的工具 Prefixr
  • Iframe自适应高度兼容ie,firefox多浏览器
  • 都是IE惹的祸多浏览器兼容问题
  • php文件下载代码(多浏览器兼容、支持中文文件名)
  • 兼容ie6浏览器的php下载文件代码分享
  • 在到达无H无F境界前~还是要痛苦~我兼容浏览器的CSS
  • 不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码
  • 多浏览器css兼容分析小结
  • jquery禁用右键、文本选择功能、复制按键的代码(兼容多浏览器)
  • jQuery.event兼容各浏览器的event详细解析
  • jQuery右下角弹出广告代码兼容多浏览器
  • php下载文件代码(兼容ie6浏览器)
  • jquery div拖拽效果(兼容浏览器)
  • css浏览器不兼容原因分析及解决办法第1/2页
  • css实现兼容各个浏览器的技巧的代码
  • Css浏览器兼容的解决方法
  • Web系统通过EXE文件实现读取客户电脑MAC等硬件信息且兼容非IE浏览器
  • 兼容各个浏览器的技巧
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 最新谷歌浏览器(google chrome)官方正式稳定版下载(2014版_2015版谷歌浏览器下载)
  • Android 图片浏览器 雪梦图片浏览器
  • 设置sharepoint 2010文档库中的 pdf文件在浏览器中访问的打开方式
  • 使用php检测用户当前使用的浏览器是否为IE浏览器
  • IE(Internet Explorer)浏览器中启用cookie的步骤
  • 如何防止按浏览器右上角的"x" 来关闭浏览器
  • 微软浏览器IE 11(InternetExplorer 11)简体中文预览版介绍及下载地址
  • 用浏览器看applet,总是只能看到修改前的applet,关了浏览器,再开,还是只能看到修改前的,难道真的要重启机子?太夸张了
  • php5中当浏览器禁用cookie时保持会话session的方法
  • 菜鸟用tomcat3.2,在他的root目录下建立了一个test1.jsp.用浏览器显示正常,但我后来删掉了,可用浏览器还可以看到test1.jsp,这是怎么回事
  • 我的IE浏览器崩溃,怎么办?(不能浏览了!)急。。。。。
  • Iframe自适应高度兼容ie,firefox多浏览器 iis7站长之家
  • 新手请教一段javascript代码,如何设置浏览者浏览器的字体?
  • 如何在red hat的网页浏览器中浏览使用ipv6协议的网页?
  • 第一天接触LINUX,我的LINUX自带的网景浏览器为何浏览网页的时候问题如此多呢???
  • 我的小应用程序在JCREATOR的Appletviewer里可以浏览但是不能在浏览器里运行这是为什么
  • PHP的浏览器检测库 Detector
  • 用3G无线上网卡上网必须用sudo运行浏览器才能浏览网页!
  • 糖果浏览器 TangoBrowser
  • 请教如何使用Java编写的Applet程序关闭浏览器??
  • 跨平台浏览器 Opera


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3