CSS hack

CSS hack是为了根据不同浏览器或者同一浏览器的兼容或者某些特性引起的页面展示效果不达人愿而使用的一种技术
大致分为三类:
1、选择器前缀法: 例如 IE6能识别div .div{},IE7能识别+div .div{}或者*:first-child+div .div{}。
2、属性前缀法:IE6能识别""和" * ",IE7能识别" * ",但不能识别"",IE6~IE10都认识"\9",但firefo对前述三个都不认识
3、IE条件注释法:,针对IE6及以下版本: 。这类Hack既可以调节样式,也可以执行内部的判断语句。

选择器前缀法

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

属性前缀法

编号 hack 例子 适用浏览器
1 * *color IE6 及以下版本 IE7
2 + +color IE6 及以下版本 IE7
3 _ _color IE6 及以下版本
4 - -color IE6 及以下版本
5 # #color IE6-IE10
6 \0 color:#000\0; IE8和IE10
7 \9\0 color:#000\9\0; IE9和IE10
8 \9 color:#000\9; IE6 - IE10

IE条件注释法

主要是针对ie浏览器的,通过判断IE浏览器的版本从而给定样式或者判断条件


img.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。