CSS Hack 是一种在网页开发中常用的技术,用于解决不同浏览器之间的兼容性问题,由于不同浏览器对 CSS 的解析和渲染可能存在差异,开发者需要使用一些特殊的技巧来确保网页在各种浏览器中都能正常显示,以下是关于 CSS Hack 的详细内容:
1、CSS Hack 的原理
选择器解析差异:不同浏览器可能对某些特殊的选择器有不同的解析方式,IE6 能识别*html .class
,IE7 能识别+html .class
或*:first-child+html .class
。
属性解析差异:某些 CSS 属性可能只被特定浏览器支持或解析,IE6 能识别下划线 "_" 和星号 " * ",IE7 能识别星号 " * ",但不能识别下划线 "_",IE6~IE10 都认识 "9",但 firefox 前述三个都不能认识。
值解析差异:相同属性的不同值可能在不同浏览器中有不同的表现。
注释处理差异:某些浏览器可能会忽略特定格式的注释,IE 条件注释只有 IE 浏览器能识别。
2、CSS Hack 的分类
类内属性前缀法:在 CSS 样式属性名前加上一些只有特定浏览器才能识别的 hack 前缀,以达到预期的页面展现效果。_color
仅 IE6 识别,*color
仅 IE6、IE7 识别,#color
仅 IE7 识别等。
选择器前缀法:通过在选择器前添加只有特定浏览器才能识别的字符,来实现针对性的样式设置。* html .example
仅 IE6 及以下版本识别,*+html .example
仅 IE7 识别。
IE 条件注释法:针对所有 IE(IE10+已经不再支持条件注释),如<!--[if IE]>IE 浏览器显示的内容 <![endif]-->
,针对 IE6 及以下版本有<!--[if lt IE 6]>只在 IE6显示的内容 <![endif]-->
等。
3、CSS Hack 的书写顺序
一般是将适用范围广、被识别能力强的 CSS 定义在前面,在标准模式下, 减号是 IE6 专有的 hack,
9
IE6/IE7/IE8/IE9/IE10 都生效,