`

Firefox,IE5,IE6,IE5.5等浏览器兼容性解决方法 .

阅读更多
找了一些相关的CSS HACK后,总结的几个方法。
<来源:http://blog.csdn.net/bkq421511585/article/details/7197893>

1. 区别FF和IE

1-1
首先,当然是!important大法,可以提升指定样式规则的应用优先权,如下面的例子:
插入代码:
div{
background-color: red !important;
background-color: blue;
}
因为!important声明在IE6中并不是绝对的,它会被之后的同名属性定义所替换。也就是说在上面的例子中,IE6所应用的是最后一个背景色的值,即“blue”;

而在FF中背景色的值为“red”。

1-2
还有一种方法,就是IE浏览器可以识别“>”等一些符号,如“~”、“`”、“<”等,都只有IE可以识别,但是不合理,!important是符合标准的。所以
插入代码:
div{
background-color: red;
>background-color: blue;
}
在FF中得到的是背景色红色,而在IE中得到的背景色是蓝色,根据样式重定义的规则,如果浏览器可以识别“>”,则应该得到的蓝色的背景,因此可以知道“>”只有IE可以识别。

这样,我们就可以把FF和IE的样式分离开。下面就是解决IE自己的问题了。

2. 区别IE5.5和IE的其他版本

看一个例子:
插入代码:
div{
>background-color: black;
>background-color /*IE5.5*/: green;
}
这个例子使用了“>”,只有IE可以识别,在IE6中得到了黑色的背景;而在IE5.5中得到的绿色的背景;

在IE5中也得到了黑色的背景。这就说明了第二句定义只有IE5.5能识别,这是个很早就公布的HACK,可以在网上找到相关的资料,要注意的就是在属性名之后是有一个空格的。

到此我们已经把FF、IE5.5、IE6分离出来了,那IE5呢?其实现在我们只要把IE5跟IE6分开就OK了。

3. 区别IE5与IE5.5+
插入代码:
div{
>background-color: red;
}
div/*IE5.5+*/{
>background-color: black;
}
这里我们又用到一个HACK,就是“div/**/{}”,这个定义在IE5以上的版本才能识别出来。

这个例子得到的结果是,在IE5中的背景色为红色;在IE5以上版本中得到的是黑色背景。

4. 完整的Hack
这样我们就可以为不同的浏览器定义不同的样式了。来看个完整的例子:
插入代码:
div{
width: 500px;
height: 50px;
background-color: red !important;/*FF*/
background-color: blue;/*IE5*/
text-align:center;
}
div/*IE5.5+*/{
>/*IE only*/background-color: black;/*IE6*/
>/*IE only*/background-color /*IE5.5*/: green;
}
需要注意的是,在上面例子中“background-color”定义的顺利不能改变,即FF-IE5-IE6-IE5.5。

对于IE的定义在属性前要加“>”,因为“div/**/{}”这个HACK在FF中可以识别。
分享到:
评论

相关推荐

    CSS兼容大全IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari等浏览器

    CSS Hack兼容大全,令网页能正常显示在IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari等浏览器上

    css hack 兼容IE5.0、IE5.5、IE6.0、IE7.0、FF1.5、FF2.0 浏览器兼容教程

    IE7.0简体中文正式版发布了,对于我等常和网页打交道的人来说... 兼容浏览器版本:IE5.0,IE5.5,IE6.0,IE7.0,Firefox1.5,FireFox2.0  CSS代码:(请注重Hack代码的顺序) 复制代码代码如下: #test{ width:300px

    精通JavaScript

    Mozilla Firefox 1.5.0.3或更高版本 服务器采用IIS5.1 或以上版本 数据库使用MS Access 2000以上 2.本书所附光盘实例代码: 第1章(\第1章) 查看1.2.htm中noscript显示效果的方法如下: 1.将该实例复制到C:\...

    Web前端模块化框架BrowserRequire.zip

    IE 5.5 (添加ieload插件,若不添加则IE10 ) Opera 10 Chrome 8 Firefox 3.6 Safari 5 其中Chrome、Firefox和Safari可能会向更前的版本兼容。 对移动端有很好的兼容性。 从功能上看更像...

    Package.js:向浏览器添加软件包支持

    Chrome合金火狐苹果浏览器歌剧IE 5.5以上我确信它还能在更多其他方面发挥作用,但这就是我所能拥有的全部。 所有测试均使用。快速开始如果您想尽快上手,请略读一下API,然后按照以下说明进行操作。 首先,您需要在...

    div+css有实例,易学易懂

    8.12.5 和IE6.0 相同的问题 8.13 兼容问题实例 8.13.1 纵向导航菜单的兼容 8.13.2 横向导航菜单的兼容 8.13.3 自适应高度的兼容 8.13.4 实例制作中的兼容问题 第9 章 一个英文网站的制作 9.1 分析效果图 9.2 切图 ...

    商用版本文本编辑器DotNetTextBoxV6.0.8Source 源码

    1)修正了IE5.5和IE6.0浏览器下上传弹出窗口显示不完全的BUG! 2)修正打开上传窗口时会弹出参数无效的BUG! 3)增加了在IE8浏览器下控件显示不正确的解决办法(更新到faq.htm页面)! 2009/03/23 Version 6.0.2 For VS...

    YouDianCMS v8.0 开源PC手机微信app小程序五合一 v8.0.zip

    模板采用DIV CSS布局,并兼容 IE6/7/8/9/10、Google Chrome、Firefox、Opera、Webkit、搜狗、360、遨游等浏览器。 4)内置SEO功能 提升网站搜索引擎排名 SEO功能包含页面标题、关键词、描述设置;搜索引擎提交;...

    基于J2EE框架的个人博客系统项目毕业设计论文(源码和论文)

    5. 客户端运行工具:目前的系统采用浏览器作为客户端,为了支持Ajax开发框架,应该选择使用IE 5以上版本浏览器。 本网站以xp为Web平台,JSP+Ajax+Servlet+JavaBean+Hibernate为网站实现技术,建立基于MySQL数据库...

    装饰公司网站源码_免费网站模版

    3、样式和内容分离:系统主体框架div+css结构,遵循国际最新W3C网页设计标准,兼容IE系列、火狐等主流浏览器,内容和样式分离让网站风格可以轻松修改和更换,而不会导致内容和结构的破坏。 4、周密的安全策略和...

    服务类公司网站源码_免费网站模版

    3、样式和内容分离:系统主体框架div+css结构,遵循国际最新W3C网页设计标准,兼容IE系列、火狐等主流浏览器,内容和样式分离让网站风格可以轻松修改和更换,而不会导致内容和结构的破坏。 4、周密的安全策略和攻击...

    红色物流货运公司网站源码_免费网站模版

    3、样式和内容分离:系统主体框架div+css结构,遵循国际最新W3C网页设计标准,兼容IE系列、火狐等主流浏览器,内容和样式分离让网站风格可以轻松修改和更换,而不会导致内容和结构的破坏。 4、周密的安全策略和攻击...

    旅游网站源码_免费网站模版

    3、样式和内容分离:系统主体框架div+css结构,遵循国际最新W3C网页设计标准,兼容IE系列、火狐等主流浏览器,内容和样式分离让网站风格可以轻松修改和更换,而不会导致内容和结构的破坏。 4、周密的安全策略和攻击...

    蓝色医院网站源码_免费网站模版

    3、样式和内容分离:系统主体框架div+css结构,遵循国际最新W3C网页设计标准,兼容IE系列、火狐等主流浏览器,内容和样式分离让网站风格可以轻松修改和更换,而不会导致内容和结构的破坏。 4、周密的安全策略和...

    cuteEditor6.0

    跨浏览器,跨平台的所见即所得在线html编辑器 &lt;br/&gt;兼容市面上最流行的ie5.5+,firefox1.0+,mozilla1.3+, netscape7+和Safari(1.3+)浏览器,并且包括Mac和Linux操作平台。 CuteEditor...

    物业管理公司网站源码_免费网站模版

    3、样式和内容分离:系统主体框架div+css结构,遵循国际最新W3C网页设计标准,兼容IE系列、火狐等主流浏览器,内容和样式分离让网站风格可以轻松修改和更换,而不会导致内容和结构的破坏。 4、周密的安全策略和...

    管理企业网站源码_免费网站模版

    3、样式和内容分离:系统主体框架div+css结构,遵循国际最新W3C网页设计标准,兼容IE系列、火狐等主流浏览器,内容和样式分离让网站风格可以轻松修改和更换,而不会导致内容和结构的破坏。 4、周密的安全策略和...

    蓝色服务类公司网站源码_免费网站模版

    3、样式和内容分离:系统主体框架div+css结构,遵循国际最新W3C网页设计标准,兼容IE系列、火狐等主流浏览器,内容和样式分离让网站风格可以轻松修改和更换,而不会导致内容和结构的破坏。 4、周密的安全策略和攻击...

    jspBB 论坛(问答)系统 v1.0

    浏览器:IE11、Edge、Firefox、Chrome。 Kotlin1.3或更高版本。(开发环境需要) Maven3.3或更高版本。(开发环境需要)jspBB 论坛(问答)系统技术栈Kotlin/Java Mybatis SpringBoot 2 Shiro Thymeleaf ...

Global site tag (gtag.js) - Google Analytics