`

常用CSS Hack

阅读更多
代码如下:


@import url(”website.css”)
注意这句,只对ie5版本以上和现代浏览器才有效,ie4,不会认识的..
—————————————————-
@import url(”oncss.css”) screen;
ie系列全不识别. ..因为ie对指定设备类型的选项都不支持..firefox 可以识别;
—————————————————
注释hack
<style type=”text/css”>
*{ margin:0px; padding:0px;}
#content { background-color:red;}
#content /**/{ background-color:green;}
</style>
ie6,ie7,firefox都读成green;
ie5以下,读成red;


IE7和IE6可以识别
style{
*height:50px;//“*”仅IE6和IE7可以识别。
}
*当针对IE6和IE7时可以用这样的方法。

仅IE6可以识别
style{
_height:50px;//“_”仅IE6可以识别。
}

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

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

仅IE7与IE5.0可以识别
*+html select {…}
当面临需要只针对IE7与IE5.0做样式的时候就可以采用这个HACK。 

仅IE6不识别,屏蔽IE6

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

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

select/*IE5不识别*/ {…}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别,IE5.5可以识别。
多出来的字节以省略号显示
text-overflow:ellipsis;overflow:hidden;white-space: nowrap;
顺序必须这样,换了顺序可能就没这个效果了!

针对Opera的样式–只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。

css的过滤器
为了让一些特别的样式不 影响到其他正常的浏览器,特把特别的样式分离出来,通过过滤的方法加载到浏览器里,这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。



IE5.x的过滤器,只有IE5.x可见
@media tty {
i{content:”\”;/*” “*/}} @import ‘ie5win.css‘; /*”;}
}/* */ 

IE5/MAC的过滤器,一般用不着
/*\*//*/
@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可识别
分享到:
评论

相关推荐

    常用CSS HACK问题及解决代码.docx

    常用CSS HACK问题及解决代码.docx

    CSS Hack技术介绍及常用的Hack技巧集锦

    主要介绍了CSS Hack技术介绍及常用的Hack技巧集锦,本文讲解了什么是CSS Hack、常用的CSS Hack、IE6对!important的支持、IE6下的多选择符等内容,需要的朋友可以参考下

    CSS网站布局实录 (第二版)PDF版

    7.1.2 常用CSS hack使用方法 7.1.3 CSS hack管理 7.2 IE条件注释功能 7.3 盒模型问题 7.3.1 盒模型hack 7.3.2 简单盒模型hack方法 7.4 IE捉迷藏 7.5 ul的不同表现 7.6 IE 3px问题 7.7 高度不适应 7.8 IE6断头台问题 ...

    css hack 文档集合

    写了有不少网页了,css的兼容性代码也写了不少,将收集的一些常用的hack方法打包上传共享下~ 下面是最常用的三种hack方式 第一种: .div { background:orange;/*ff*/ *background:green !important;/*ie7*/ ...

    css hack总结 图片整理版

    查看如下表格: 常用CSS Hack技术 不常用CSS Hack技术

    css 4.2.7中文手册(CHM版)

    css 4.2.7中文手册给大家列举了...还展示了速查总表,列举了一些使用比率较高的常用CSS Hack。 另外,给大家总结了一些使用过程中,遇到的问题和解决办法,并且提供了一些简单的小技巧和经验,希望能为大家带来帮助。

    CSS常用技巧之CSS书写技巧和CSS HACK技巧

    CSS Hack常见的有三种形式:CSS属性Hack、CSS选择符Hack以及IE条件注释Hack, Hack主要针对IE浏览器。 1、属性级Hack:比如IE6能识别下划线”_”和星号” * “,IE7能识别星号” * “,但不能识别下划线”_”,而...

    很不错的 CSS Hack 又学了一招

    在现代 web 开发中,hack 语句已经不太常用,因为大多数浏览器已经实现了较好的兼容性。但是,在一些特殊情况下,hack 语句仍然可以发挥其作用。 CSS Hack 是一种解决浏览器之间兼容性问题的方法,通过使用特殊的 ...

    针对firefox ie6 ie7 ie8的css样式hack

    针对firefox ie6 ie7 ie8的css样式hack

    CSSer常用的Hack兼容表

    IE6,IE7,IE8,Firefox,Chrome,Safari的CSS_hack兼容表

    针对主流浏览器的CSS-HACK写法及IE常用条件注释

    本文将为你总结CSS针对各浏览器的兼容HACK(以IE6/IE7/IE8 /FF为主),以及IE特有的条件注释使用方法.

    HTML+CSS前端编码规范.pdf

    CSS hack 是指使用特殊的 CSS 代码来解决浏览器之间的兼容性问题。 11. JS 调用规范 JS 调用规范指的是在 HTML 代码中调用 JavaScript 文件的方式。一般来说,JS 文件应使用相对路径或绝对路径连接。 12. HTML+CSS...

    CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera

    今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐、Chrome、Opera浏览器的Hack,并把这些CSS Hack综合的一起,写了一个小的浏览器测试器

    CSS浏览器兼容性Hack大全

    本文汇总了一些CSS的浏览器兼容性的hack,都是非常常用的,作为一个前端设计师经常能够用到,这里推荐给大家。

    IE系列的Css if hack条件语法

    浏览器的兼容性不容忽视,特别是在IE下,因此就出现了Css if hack条件判断。下面整理了一些常用的判断语句,大家还可以挖掘更多比较有实用价值的条件语法

    CSS后处理工具CSSGrace.zip

    CSS Grace 是一个由 PostCSS 驱动,面向未来的 CSS 后处理工具。...向后,CSS Grace 可以生成兼容旧浏览器的各种 Hack,让你无需担忧兼容性。而你,只用书写和关心标准的 CSS 语法。 标签:CSSGrace CSS框架

    超实用的CSS代码段

    , 《超实用的CSS代码段》从网页效果的不同类型和使用场景,对常用的CSS代码段进行了全方位的介绍和演示。《超实用的CSS代码段》分为11章,包含文字、字体、边框、图片、按钮、链接、背景、颜色、动画、页面布局、...

    2天掌握DIV CSS网页制作技术

    【基础六】CSS选择器命名及常用命名 【基础七】盒子模型 【基础八】块状元素和内联元素 ================================= 课程 【第一课】盒模型、块状元素与内联元素、CSS选择器 【第二课】浮动 【第三课】清除...

Global site tag (gtag.js) - Google Analytics