CSS Hack收集汇总_经验交流

 屏蔽IE浏览器(也就是IE下不显示)
*:lang(zh) select {font:12px !important;} /*FF的专用*/
select:empty {font:12px !important;} /*safari可见*/
这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。
仅IE7识别

*+html {…}
当面临需要只针对IE7做样式的时候就可以采用这个HACK。
IE6及IE6以下识别

* html {…}
这个地方要特别注意很多地主都写了是IE6的HACK其实IE5.x同样可以识别这个HACK。其它浏览器不识别。
html/**/ >body select {……}
这句与上一句的作用相同。
仅IE6不识别

select { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值,流释在冒号前。
仅IE6与IE5不识别

select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
仅IE5不识别

select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别
盒模型解决方法

selct {width:IE5.x宽度; voice-family :”\”}\”"; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。
清除浮动

select:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的HACK来对父级做一次定义,那么就可以解决这个问题 。
截字省略号

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。
只有Opera识别

@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。
以上都是写CSS中的一些HACK,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器,只有IE5.x可见

@media tty {
i{content:”\”;/*” “*/}} @import ‘ie5win.css'; /*”;}
}/* */
IE5/MAC的过滤器,一般用不着

[Copy to clipboard] [ - ]CODE:
/*\*//*/
@import “ie5mac.css”;
/**/
IE的if条件Hack

<!–[if IE]> Only IE <![endif]–>
所有的IE可识别
<!–[if IE 5.0]> Only IE 5.0 <![endif]–>
只有IE5.0可以识别
<!–[if gt IE 5.0]> Only IE 5.0+ <![endif]–>
IE5.0包换IE5.5都可以识别
<!–[if lt IE 6]> Only IE 6- <![endif]–>
仅IE6可识别
<!–[if gte IE 6]> Only IE 6/+ <![endif]–>
IE6以及IE6以下的IE5.x都可识别
<!–[if lte IE 7]> Only IE 7/- <![endif]–>
仅IE7可识别
以上内容肯定并不全面,欢迎大家能和我一起把这些技巧都汇总起来,为以后工作的查询提供一个方便,同时在这里感谢那些研究出这些HACK的人们。

时间: 2024-10-27 19:03:37

CSS Hack收集汇总_经验交流的相关文章

css ie6 ie7 ff的CSS hack使用技巧_经验交流

FF浏览器 .test{ height:20px; background-color:orange; } IE7浏览器 *+html .test{/*IE7*/ height:20px; background-color:blue; } IE6浏览器 *html .test{/*IE6*/ height:20px; background-color:black; } 通过上面的CSS代码可以看出FF还是最听话的浏览器.在IE6和IE7如果要使用HACK必须要在前面加上夫级标签html. 这里就很

div+CSS 兼容小摘_经验交流

区别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; IE7,IE8兼容: <meta http

指定网页的doctype解决CSS Hacking方法总结_经验交流

但是实际上,浏览器远远不止这几个,Firefox分为Firefox 1.5,Firefox 2,Firefox 3几个主要版本,IE7,IE6中也各有好几个系列,另外除开这两个主流厂商的产品之外,还有Opera,Konqueror,Netscape,chrome等一系列. 这些浏览器,各有各的一套,往往在这里运行正常,在那里运行就不正常了.于是WD们拆东边补西边,终于能在几个浏览器下都正常了.结果,产品经理又有了新的需求,需要在哪儿哪儿那儿改一下,于是乎,好不容易糊弄好的的纸架子一下子倒塌了,W

IE hack条件写法_经验交流

最近制作下拉菜单时,打算用纯CSS,忽又看到令人头痛的CSS hack代码(平时很少关注),记录下来以作备用. <!–[if lte IE 6]>----.<![endif]–> Ite:less than or equal to意思是小于或等于IE6浏览器,用于IE浏览器的条件注释,常用于CSShack,针对IE的JS等. 以下是各种情况,未验证. 1. <!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–> 2

CSS顶级技巧大放送,div+css布局必知_经验交流

字体大小使用px 在一行内声明CSS 对比下面两个: h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;} h2 {    font-size:18px;    border:1px solid blue;    color:#000;    background-color:#FFF;    } 第二种看起来的确格式化,但是不会在阅读上有任何帮助.写在一行内可以让你更快的找到需要的部分. 以

Zen Coding 快速编写HTML/CSS代码的实现_经验交流

在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间?如果你的编辑器有代码提示功能,你编写的时候就会容易些,但即便如此你还是要手动敲入很多代码. 在JavaScript方面,当我们想要在一个页面上获取某个特定的元素时,我们就会遇到同样的问题,我们必须写很多代码,这就变得难于维护和重用.JavaScript框架应运而生,它们同时引入了CSS选择器引擎.

CSS注释、命名、继承性、样式排序等CSS技巧的小结_经验交流

一.关于注释 在创建xhtml+CSS网站时,CSS中的注释非常重要.在创建CSS样式时,应当保持随手注释的习惯.一般的,我习惯于使用"/* 注释内容 */"的格式来写注释,因为在EditPlus等具有高亮功能的编辑器里,使用C语言中常用的"/***************/"之类的注释是无意义的,没有必要填充大量无意义内容作为分隔.带有注释的文档作为网站的原始CSS文档,在发布网站的时候,可以使用CSS压缩工具压缩CSS,在输出的CSS中去掉注释以提高文件传输效率

门户网站构建CSS框架的规则_经验交流

第一部:关于构建CSS框架我们要实现的目的: 1.实现标准化,具备主流平台适应性的前端实现: 2.快速开发,在站点风格确定后,前端不应该成为整个项目里瓶颈: 3.重构的需求,尽可能的让类和区块样式可重用: 4.分离结构和表现的需求,遵守了语义化结构的约定; 5.构架完全符合金融网特色的CSS框架. 6.对代码进行必要的搜索引擎优化. 第二部:关于CSS命名的一些约定: 1.不使用大写形式的类名和id名; 2.尽可能使用描述性的英文单词的组合作为类名和id名; 3.id名及类名的多个英文单词之间使

多浏览器css兼容分析小结_经验交流

CSS 兼容要点:  1. DOCTYPE 影响CSS 处理 . 2 .FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行.  3 .FF: body 设置text-align 时, div 需要设置margin: auto(主要是 margin-left,margin-right) 方可居中.  4 .FF: 设置padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important