您现在的位置是:网站首页> 编程资料编程资料
CSS hack 针对IE6,IE7,firefox显示不同效果_浏览器兼容教程_CSS_网页制作_
2021-09-08
826人已围观
简介 CSS hack:针对IE6,IE7,firefox显示不同效果 做网站时经常会用到,衡量一个DIV+CSS架构师的水平时,这个也很重要。
区别不同浏览器的CSS hack写法:
区别IE6与FF:
background:orange;*background:blue;
区别IE6与IE7:
background:green !important;background:blue;
区别IE7与FF:
background:orange; *background:green;
区别FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;
注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
IE6 | IE7 | FF | |
* | √ | √ | × |
!important | × | √ | √ |
------------------------------------------------------
另外再补充一个,下划线"_",
IE6支持下划线,IE7和firefox均不支持下划线。
IE6 | IE7 | FF | |
* | √ | √ | × |
!important | × | √ | √ |
_ | √ | × | × |
于是大家还可以这样来区分IE6,IE7,firefox
: background:orange;*background:green;_background:blue;
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。
一、CSS HACK
以下两种方法几乎能解决现今所有HACK.
1, !important
随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.)
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
2, IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
注意:
*+html 对IE7的HACK 必须保证HTML顶部有如下声明:
二、万能 float 闭合(非常重要!)
关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 >
关于闭合浮动元素(clearing float)的方法现在已经很多了,个人认为简单实用的方法就是使用:after伪类动态的嵌入一个用于清除浮动的元素,可惜代码量太大了,看上去不够简洁。
现在看到有个方法超级简单。介绍一下这个方法。原文在:http://annevankesteren.nl/2005/03/clearing-floats
这 一方面的原理是,外围元素之所以不能很好的延伸,问题出在了overflow上,因为overflow不可见(见W3C的解释)。现在只要将给外围元素添 加一个“overflow:auto”,就可以解决问题,结果是除了IE,真的可以解决。下来就要解决ID的问题了,再加上“_height:1%”,这 个问题就完全解决了。
下面的例子作为比较
1、没有闭合浮动元素;2、非IE下闭合浮动元素;3、完全闭合元素。相关代码如下:
XHTML代码:
w.52css.com]
Float left
Float right
CSS样式:
w.52css.com]
.column_left{ float:left; width:20%; padding:10px;}
.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}
三、其他兼容技巧(再次
相关内容
- div vertical-align不起作用解决办法 _Div+CSS教程_CSS_网页制作_
- 使您的CSS网页布局代码更专业 精简CSS文件_CSS布局实例_CSS_网页制作_
- CSS 盒模型(Box Model)的学习和理解_CSS教程_CSS_网页制作_
- 解决IE6下Position:fixed问题 _CSS教程_CSS_网页制作_
- CSS 透明背景时,记得给容器加上width宽度_CSS教程_CSS_网页制作_
- 纯css制作的漂亮好看的进度条 _CSS教程_CSS_网页制作_
- CSS list-style熟悉解释_CSS教程_CSS_网页制作_
- table CSS制作好看的网页表格_CSS教程_CSS_网页制作_
- css中IE判断语句 if !IE_浏览器兼容教程_CSS_网页制作_
- 表单label美化代码_CSS教程_CSS_网页制作_