刚更新的css hack技巧

1概念:

不同的浏览器对CSS的解析效果不同,为了达到相同的效果,就得根据不同浏览器写不同的css

2规则:

 CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对IE浏览器。

 类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。等等  

选择器Hack:比如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。等等  

HTML头部引用(if IE)Hack:针对所有IE:<!--[if IE]><!--您的代码--><![endif]-->,针对IE6及以下版本:<!--[if lt IE 7]><!--您的代码--><[endif]-->这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

书写顺序,一般是将识别能力强的浏览器的CSS写在后面。

举个栗子:


background: #f00;   各浏览器都认识,主要给高级浏览器用

background: blue\0; 网上说是给IE8的,不过经过测试,IE10、9、8都认识他。

background:#F60\0\9;  这个东西是给IE8 玩

background: red\9;  这个东西好玩了,所有的ie都认识他。

+background: yellow;   *或+ 留给了IE7、6 这一点还是不错的

_background:black; _专门留给ie6

:root .test{background: blue\9;} :root是给ie9的,网上流传了个版本是 :root #test { background:blue\0;},新版opera也认识,所以经过反复验证最终ie9特有的为:root 选择符 {属性\9;}
浏览器内核 Trident Trident Trident Trident Trident Trident Gecko Presto WebKit
  IE6 IE7 IE8 IE9 IE10 IE11 FF Opera Sarari
* T T F F F F  F F F
_ T F F F F F F F F
!important  见下面详解  T  T  T  T  T  T T T
@cc_on(特性检测)激活条件编译  见下面详解  见下面详解  见下面详解  见下面详解
if(/*@[email protected]*/false){

      document.documentElement.className+=‘ie10‘;

}


 if (/*@[email protected]*/true) {

document.documentElement.className += ‘ ie‘ + document.documentMode;

}


同IE11

 同IE11

 同IE11
 \9  T  T  T  T  T  T  F F F
\0 F F T T T T  F T F
\9\0       T,其余F          

3标准盒模型:元素宽度=width+padding+border+margin

     IE: 元素宽度=width+margin(padding和border都包含在width中了)

4<!--[if IE]><![endif]-->

<!--[if IE]><link href="ie_styles.css" rel="stylesheet" type="text/css" /><![endif]-->我们可以通过这种方法在<!--[if IE]><![endif]-->里面加上只想让IE解析的东西,比如css,js,HTML。,其他浏览器会把他们当成注释。

5多类选择符的写法:

#my.c1.c2 { color:red;}
.c1.c2 { color:red;}

以上代码在IE6中会被理解为

#my.c2 { color:red;}
.c2 { color:red;}

在开发中最好不用多类选择器这样组合,因为IE6会只会读最后一个。
6!important在ie6中

识别:

<style type="text/css">
.demo{ color:red !important; }
.demo { color:green; }
</style>
<div class="demo">www.jb51.net</div> 

不识别:

<style type="text/css">
.demo{
color:red !important;
color:green;
}
</style>
<div class="demo">www.jb51.net</div>

也就是说在在一个选择器中利用!important改变样式的优先级是没有用的,在不同选择器中又是可以的。

7关于ie8-9:请注意一些细小的差别:

background-color:red\0;IE8和IE9都支持;
background-color:blue\9\0; 仅IE9支持;
background: red\9; /*所有的 ie*/
:root .test{background: red\9;} /*ie9*/

[email protected]_on 语句的用法

/*@cc_on @*/
/*@
document.write("JScript version: " + @_jscript_version + ".");
document.write("
");
@if (@_win32)
document.write("Running on the 32-bit version of Windows.");
@elif (@_win16)
document.write("Running on the 16-bit version of Windows.");
@else
document.write("Running on a different operating system.");
@end
@*/
时间: 2024-11-05 15:44:50

刚更新的css hack技巧的相关文章

CSS hack技巧大全

CSS hack技巧大全[转]:http://www.duitang.com/static/csshack.html 常用CSS书写技巧和CSS HACK技巧[转]:http://www.cnblogs.com/pittzh/archive/2009/07/23/1529769.html

Firefox与IE的CSS兼容CSS HACK技巧

1. Div居中问题 div设置 margin-left, margin-right 为 auto 时已经居中,IE 不行,IE需要设定body居中,首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中. 2.CSS 链接(a标签)的边框与背景 a链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行.参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height

CSS Hack 技巧

IE Hack IE系列浏览器的hack大略如下: _nowamagic:1px;---–ie6 *nowamagic:1px;---–ie7 nowamagic:1px\0;----ie89 nowamagic:1px\9\0;--–ie9 :root nowamagic:1px;    --ie9(实际情况可能ie9还是有问题,再用这种方式) 其中粉红色部分为属性hack,黄色部分为选择器hack,它们可以结合使用. Firefox 与 Chrome 的 Hack Firefox: @-mo

转 part2 —— CSS hack技巧大全

--作者:吴雷君 兼容范围: IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome 参考资料: 各游览器常用兼容标记一览表: 标记 IE6 IE7 IE8 FF Opera Sarari [*+><] √ √ X X X X _ √ X X X X X \9 √ √ √ X X X \0 X X √ X √ X @media screen and (-webkit-min-device-pixel-ratio:0){.bb{}} X X X X

2天驾驭DIV+CSS (技巧篇)(转)

这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是技巧篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” 将你引入两大误区[知识三] 什么是W3C标准?[基础一] CSS如何控制页面[基础二] CSS选择器[基础三] CSS选择器命名及常用命名[基础四] 盒子模型[基础五] 块状元素和内联元素 实战篇[第一课] 实战小热身[第二课] 浮动[第三课] 清除浮动[第四课] 导航条(上) | 导航条(下)[大练

css兼容技巧

CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 http://www.php100.com 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍.这是一个ie6都存在的bug.解决方案

CSS hack样式兼容模式收藏

part1 —— 浏览器测试仪器,测试您现在使用的浏览器类型 IE6   IE7   IE8   Firefox   Opera   Safari (Chrome)   IE6   IE7   IE8   Firefox   Opera   Safari (Chrome)   您现在使用的浏览器是Opera.Opera游览器很时髦么. 您现在使用的浏览器是Firefox.Firefox是很强大的游览器. 您现在使用的浏览器是Safari(Chrome).Safari和Chrome使用的都是Web

CSS - Hack 总结

CSS hack总结: 1.兼容范围:IE6.0+.FirFox2.0+.Opera10.0+.Sarari3.0+.Chrome. 注意:网上很多资料中常常把!important也作为一个hack手段,其实这是一个误区.!important常常被我们用来更改样式,而不是兼容hack.造成这个误区的原因是IE6在某些情况下不主动识别!important,以至于常常被人误用做识别IE6的hack.可是,大家注意一下,IE6只是在某些情况下不识别(ie6下,同一个大括号里对同一个样式属性定义,其中一

让IE和Firefox兼容的CSS技巧集合css hack

CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不