博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【原】CSS hack整理(更新于20141109)
阅读量:5881 次
发布时间:2019-06-19

本文共 2098 字,大约阅读时间需要 6 分钟。

浏览器的兼容性一直是个头疼的问题,使用“欺骗”技术可使各个浏览器效果一致,花了些时间整理了各个浏览器的HACK,主要包括IE系列和最新版本的Chrome、Safari、Firefox、 Opera,比较全面的记录下Hack,内容包括3部分:媒体查询 hack、属性Hack、选择器Hack,这些Hack已经测试并得到有效运用,有需要的同学可以放心使用,笔者会在以后不断的更新,如果有需要补充或者修改的,欢迎大家指教!

以下代码之间的空格是必要的,缺少空格导致失效

/*---------------------------------媒体查询hack [[---------------------------------*/

/* 只支持IE6、7 */

@media screen\9 {...}

 

/* 只支持IE8 */

@media \0screen {...}

 

/* 只支持IE6、7、8 */

@media \0screen\,screen\9 {...}

 

/* 只支持IE8、9、10 */

@media screen\0 {...} 

 

/* 只支持IE9、10 */

@media screen and (min-width:0\0) {...} 

 

/* 只支持IE10 */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {...} 

 

/* 支持IE9、Chrome、Safari、Firefox、 Opera */

 

@media all and (min-width:0){...} 

 

/* 只支持wekit内核浏览器Chrome、Safari */

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

 

/* 只支持Opera */

@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {...} 

 

 /* 只支持Firefox */

@-moz-document url-prefix() {...}

 如:

@hack@hack@hack@hack@hack@hack

/*---------------------------------媒体查询hack ]]---------------------------------*/

 

/*---------------------------------选择器hack [[---------------------------------*/

/* 只支持IE7 */

html* 选择器{} 

 

/* 仅支持IE7  使用该选择器需要HTML顶部有声明:<!DOCTYPE HTML ......>*/

*+html  选择器{}

 

/* 只支持IE6 */

*html  选择器{}

如:

选择器hack选择器hack选择器hack选择器hack选择器hack选择器hack

html* .class{color:#F00;} /* 在IE7中文本颜色为红色 */*+html .class{color:#0F0;} /* 在IE7中文本颜色为绿色 */*html .class{color:#00F;} /* 在IE6中文本颜色为蓝色 */

 /*---------------------------------选择器 hack ]]---------------------------------*/

 

 

/*---------------------------------属性hack [[---------------------------------*/

/* 只支持IE6、7、8、9、10 */

选择器{属性:属性值\9;}

 

/* 支持IE8、9、10 */

选择器{属性:属性值\0;}

 

/* 支持IE8的部分属性值、完全支持IE9、10 */

选择器{属性:属性值\9\0;}

 

/* 仅支持IE7和IE6 */

选择器{

*属性:属性值;}

 

/* 只支持IE6 */

选择器{

_属性:属性值;}

 

/* 只不支持IE6 */

选择器{属性:属性值!important;}

 

/* 仅支持Safari和Chrome ,且只能放在选择器的最后一个属性,因为当浏览器解析[;;]后,不会再读取后面属性 */

选择器{

[;属性:属性值;]}

如:

属性hack属性hack属性hack属性hack属性hack属性hack

/*---------------------------------属性hack ]]---------------------------------*/ 

 

 建议是:尽量写出无hack的结构和样式,做到可以向后兼容,减少多余代码,更加可以体现自己专业化的态度。

作者:白树

出处:

转载地址:http://kztix.baihongyu.com/

你可能感兴趣的文章
Linux中下载,压缩,解压等命令
查看>>
在Linux命令行下发送html格式的邮件
查看>>
说说PHP中foreach引用的一个坑
查看>>
基于express框架的应用程序骨架生成器介绍
查看>>
Spring学习11-Spring使用proxool连接池 管理数据源
查看>>
2016第6周五
查看>>
ASP.NET 免费开源控件
查看>>
面向对象葵花宝典阅读思维导图(二)
查看>>
volatile关键字与线程间通信
查看>>
优秀大数据GitHub项目一览
查看>>
WPF 窗体显示最前端
查看>>
tit.Atitit. http 代理原理 atiHttpProxy 大木马 h
查看>>
TCP/IP详解学习笔记(8)-DNS域名系统
查看>>
WPF 之 布局(一)
查看>>
Wireshark设置interface 时提示“There are no interfaces on which a capture can be done ”
查看>>
Android Studio使用SVN,与eclipse共同开发。
查看>>
iOS图片上传及压缩
查看>>
CentOS 7 ARM 版发布:支持树莓派2/香蕉派/CubieTruck
查看>>
Android Studio 编写 JNI
查看>>
nginx配置文件或目录404和403
查看>>