CSS hack 初学小结

什么是浏览器HACK：当我们使用不同的浏览器（Firefox，IE7， IE6， IE 8, Safari, Opera, chrome）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。而HACK就是一种办法，能让你在一个CSS里面独立的写支持不同浏览器的样式。这下就和谐了。呵呵！

第一个HACK，IE FF 所有浏览器公用（其实也不算是HACK）

height:100px;

第二个HACK IE6专用

_height:100px;

第三个HACK IE6 IE7公用

*height:100px;

介绍完了这三个HACK了，下面我们再来看看如何在一个样式里分别给一个属性定义IE6 IE7 FF专用的HACK，看下面的代码，顺序不能错哦：

程序代码

height:100px;

*height:120px;

_height:150px;

下面我简单解释一下各浏览器怎样理解这三个属性：

在FF下，第2、3个属性FF不认识，所以它读的是 height:100px;

在IE7下，第三个属性IE7不认识，所以它读第1、2个属性，又因为第二个属性覆盖了第一个属性，所以IE7最终读出的是第2个属性 *height:120px;

在IE6下，三个属性IE6都认识，所以三个属性都可以读取，又因为第三个属性覆盖掉前2个属性，所以IE6最终读取的是第三个属性。

CSS Hack 的内置与外置写法

外置：

.main{ float:left;#float:none;_float:none;

html*.main{ float:left;#float:none;_float:none; }

*+html .main{ float:left;#float:none;_float:none; }

* html .main{ float:left;#float:none;_float:none; }

* 第1行给Firefox以及其他浏览器看

* 第2行给safari/IE6/iE7看，如果safari/IE6/iE7 视觉效果不统一，就要在后面跟IE6/IE7的定义

* 第3行给IE7看

* 第4行给IE6以及更老的版本看

内置：

.main{ float:left;#float:none;_float:none;[float:none;]float:none; }

* 第1个float给Firefox以及其他浏览器看

* 第2个加#的float给IE7看

* 第3个加_的float给IE6以及更老的版本看

* 第4个加[的float给safari看

* 第5个加]的float给IE看

仅 Safari 和 Opera 识别的 Hack

@media all and (min-width: 0px)

{/* Safari and Opera rules here */}

或者

@media screen and (-webkit-min-device-pixel-ratio:0)

{/* Safari and Opera rules here */}

注：这里所指代的 Safari 和 Opera 一般为最新版本。

仅 Firefox 3 和 IE7 识别的 Hack

selector, x:-moz-any-link, x:default

{/* Firefox 3 and IE7 rules here */}

使用方法例：

在

@media screen and (-webkit-min-device-pixel-ratio:0)

{

.box{width:100px;}

/* Safari and Opera rules here */

}

转载于:https://www.cnblogs.com/wangzhanjianshe/archive/2009/06/24/2326977.html

CSS hack 初学小结相关推荐

[转]CSS hack大全详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
针对IE6\7\8\9\10浏览器的CSS hack大全详解
目前IE内核浏览器仍然是国内主流浏览器,占据着PC浏览器的大部分市场份额,版本从IE6到IE10,所有前段工作者都必须面对和解决多个IE浏览器对代码的兼容性问题.在很多情况下,我们需要专门针对IE写c ...
对ie6、ie7、ff兼容性的详细css hack介绍
这个毛病把我憋了好久了,最近到底找到了解决滴方式,通过偶测试系完整ok滴,和大伙儿共享. 以下为引佣: 如今偶大多数全是用!important来hack,关于ie6和firefox测试可以正常卖弄,可 ...
【总结】IE6，IE7，IE8，Firefox兼容的css hack 补充!
IE6,IE7,IE8,Firefox兼容的css hack 补充: .color{ background-color: #CC00FF; /*所有浏览器都会显示为紫色*/ background-co ...
Google Chrome的CSS hack写法
Google自从2010年9月3日推出了浏览器Google Chrome,写前端效果的同志们又得辛苦了,现在就是个浏览器混乱的时代,自从Google混进来之后,就更混乱了. 不过还好Google用的是 ...
常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解
什么是浏览器兼容问题?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们 ...
CSS HACK：IE6、IE7、IE8、Firefox兼容性问题解决方案
CSS HACK:IE6.IE7.IE8.Firefox兼容性问题解决方案参考文章: (1)CSS HACK:IE6.IE7.IE8.Firefox兼容性问题解决方案 (2)https://www. ...
转载：CSS hack技巧大全
原文地址:http://www.duitang.com/static/csshack.html part2 -- CSS hack技巧大全 --作者:吴雷君兼容范围: IE:6.0+,FireFox ...
IE8 CSS hack
IE8正式版出来有一段日子了,但是针对ie8正式版的CSS hack却很少,其实这是值得庆幸的,因为ie8修复了很多IE6和IE7的一些BUG,更加接近W3C标准. 针对IE8正式版的CSS hack ...

CSS hack 初学小结

CSS hack 初学小结相关推荐

最新文章

热门文章