Firefox,IE5,IE6,IE5.5等浏览器兼容性解决方法
找了一些相关的CSS HACK后,总结的几个方法。
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中可以识别。
Firefox,IE5,IE6,IE5.5等浏览器兼容性解决方法相关推荐
- 【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳
1:li边距"无故"增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑 ...
- IE6 IE7 IE8 css bug兼容性解决方法总结归纳
转载自 http://blog.csdn.net/freshlover/article/details/7605207 1:li边距"无故"增加 任何事情都是有原因的,li边距也不 ...
- 关于LR录制时不能自动启动IE浏览器的解决方法
关于LR录制时不能自动启动IE浏览器的解决方法 录制环境: win7 64位操作系统IE8 LR11 在使用Loadrunner进行性能调试时,录制脚本的时候,发现Loadrunner不能自动启动IE ...
- JavaScript中的window.close在FireFox和Chrome上不能正常动作的解决方法
原文:JavaScript中的window.close在FireFox和Chrome上不能正常动作的解决方法 JS中关闭窗口的方法window.close()在IE上能够正常动作,而在FireFox和 ...
- selenium 无法启动IE浏览器的解决方法
selenium 无法启动IE浏览器的解决方法 参考文章: (1)selenium 无法启动IE浏览器的解决方法 (2)https://www.cnblogs.com/lucy-test/p/3808 ...
- 浏览器兼容性适配方法总结(跨浏览器)
浏览器兼容性问题适配,通过单独写css样式,适配各类浏览器兼容性,特别是针对IE8-9. 1-1.条件性注释(Conditional comments) [只有IE9及以前版本支持] 引入语法: 在c ...
- CSS兼容性解决方法!important的IE7,Firefox问题
转自:http://www.codesky.net/article/201008/139903.html 1. 首先谈谈!important问题的引起(盒模型问题): 在CSS标准中,一个盒模型包括4 ...
- html 引入js 兼容,JS跨浏览器兼容性解决思路及方案汇总,常见JS兼容性知识点汇总...
上篇文章我们介绍了,处理CSS浏览器兼容性的4个解决方案:浏览器CSS样式初始化.浏览器私有属性,CSS hack语法和自动化插件,有兴趣的可以看看,链接放到本文结尾 本文主要介绍JS的跨浏览器兼容性 ...
- 防止IE6出现BUG的十种常见解决方法
以下介绍的十种解决方法是针对IE6经常会出现的DIV+CSS布局BUG而使用的一些默认设置,由于IE6的BUG比较多,所以我们制作页面时经常会碰到一些莫名其妙的布局问题,每次碰到问题我们就会查找对因的 ...
- ie6 z-index不起作用的解决方法
一.概念 z-index伴随着层的概念产生的.网页中,层的概念与photoshop或是flash中层的概念是一致的.熟悉photoshop或是flash的应该知道,层级越高(图层越靠上),越在上面显示 ...
最新文章
- Python零散知识点记录
- Layui 表格编辑
- unknown builtin op: aten::Tensor
- JQuery(三)-- AJAX的深入理解以及JQuery的使用
- PHP如何在照片下面写一行字_如何使用php分别插入照片和文字?
- xml+flash图片展示
- JavaScript系列--类型判断的4种基本方法,研究jquery的type方法,空对象的检测方法,类数组对象...
- c语言学生综合测评系统_学生综合评价系统
- 入手Kindle 2
- 二、Linux 教程-基础命令(1~180未完)
- 面试必备:VUE面试题(含答案)
- 思岚RPLIDAR A2激光雷达开箱
- 梅特勒托利多xk3124电子秤说明书_梅特勒-托利多电子称设置方法
- 软件系统产品线特征及构建过程
- springboot仓储系统出入库模块设计系统java ssm
- 到底什么是阿里味?能否在不加入阿里的时候可以体验一下
- 用js获取ios时间戳,结果为NaN或不显示
- MATLAB Mann-Kendall突变检验 (mk突变检验)
- android xmlpullparser 编译出错,将Android支持库更新为23.2.0导致错误:XmlPullParserException...
- 计算机分类汇总表格,Excel分类汇总使用全攻略
热门文章
- xp重启计算机的快捷键,重启电脑的快捷键是什么?
- 腾讯云直播生成 推流地址 拉流地址
- java excel checkbox,使用Apache POI(Java)在XLSX中创建复选框
- 鸿蒙系统深度系统,国产操作系统欢迎你!华为鸿蒙系统与深度deepin操作系统正常亮相...
- 鼠标追踪技术:研究内部信息加工过程
- 粒子追踪 matlab,粒子追踪软件 - 研究粒子与场的相互作用
- Word设置默认粘贴格式,自动更改粘贴格式
- IAR9.10下载(2021-02-23)
- php-screw 安装,liunx 下安装 php_screw 扩展 以及报错处理
- 小技巧:机械键盘使用技巧