css hack整理
来源:互联网 发布:竖琴 踏板 知乎 编辑:程序博客网 时间:2024/05/01 10:11
浏览器的兼容性一直是个头疼的问题,使用“欺骗”技术可使各个浏览器效果一致,花了些时间整理了各个浏览器的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 [[---------------------------------*/
/* 只支持IE7 */
html* 选择器{}
/* 仅支持IE7 使用该选择器需要HTML顶部有声明:<!DOCTYPE HTML ......>*/
*+html 选择器{}
/* 只支持IE6 */
*html 选择器{}
如:
<p class="class">选择器hack选择器hack选择器hack选择器hack选择器hack选择器hack</p>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 ,且只能放在选择器的最后一个属性,因为当浏览器解析[;;]后,不会再读取后面属性 */
选择器{[;属性:属性值;]}
如:
<p class="class">属性hack属性hack属性hack属性hack属性hack属性hack</p><style type="text/css">.class{color:#F00\0;/* 在IE8和IE9中文本颜色为红色 */*color:#0F0; /* 在IE7中文本颜色为绿色 */_color:#00F; /* IE6中颜色为蓝色 */[;color:#F0F;]/* 在Safari和Chrome中颜色为品红色 */}</style>
/*---------------------------------属性hack ]]---------------------------------*/
建议是:尽量写出无hack的结构和样式,做到可以向后兼容,减少多余代码,更加可以体现自己专业化的态度。
- CSS Hack整理
- CSS Hack整理
- CSS Hack整理
- CSS hack整理
- CSS Hack整理总结
- css hack搜集整理
- CSS Hack整理
- css hack整理
- css hack技术整理
- 个人整理的CSS hack
- 重新整理 CSS HACK 解决浏览器兼容
- 整理的一些常用的CSS HACK
- CSS hack 整理(更新于20141109)
- CSS Hack
- CSS Hack
- CSS hack
- css hack
- css hack
- OC_协议实现代理委托模式
- IntelliJ IDEA使用教程
- c# uploadimage - httphelper
- iOS之轻松上手block
- 修改input-placeholder 默认色
- css hack整理
- Android开发,卸载应用的时候删除文件或文件夹
- apache实现虚拟主机
- Java、Android 知识点笔记
- 【反编译】的下载与使用方法 。
- NSMutableAttributedString字体颜色等属性
- 辨识颜色(HTML版)
- 技术博客里的一句无关技术的帖子
- 比较难的日语单词