css hack

最新推荐文章于 2022-01-12 07:36:59 发布

龙-少

最新推荐文章于 2022-01-12 07:36:59 发布

阅读量195

点赞数

分类专栏：前端框架文章标签： css hack

本文链接：https://blog.csdn.net/lzt199931415926/article/details/73317593

版权

前端框架专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS hack方式一：条件注释法
这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。举例如下

只在IE6下生效

CSS hack方式二：符号前缀
在标准模式中

“-″减号是IE6专有的hack

“\9″ IE6/IE7/IE8/IE9/IE10都生效

“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack

“\9\0″ 只对IE9/IE10生效，是IE9/10的hack

CSS hack方式三：选择器前缀法

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行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有效

例子：

适用范围：IE:6.0,IE7.0,IE8.0,Firefox,Safari(Chrome)之间的兼容
<style type="text/css">
   .bb{
   height:32px;
   background-color:#f1ee18;/*所有识别*/
   background-color:#00deff\9; /*IE6、7、8识别*/
   +background-color:#a200ff;/*IE6、7识别*/
   _background-color:#1e0bd1;/*IE6识别*/
   }
   @media screen and (-webkit-min-device-pixel-ratio:0){.bb{background-color:#f1ee18}}{} /*safari(Chrome) 有效 */
   .bb, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下识别 */
   @-moz-document url-prefix(){.bb{background-color:#00ff00;}}/*仅firefox 识别*/
   * +html .bb{background-color:#a200ff;}/* 仅IE7 识别 */
</style>

龙-少

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css hack

CSS hack方式一：条件注释法这种方式是IE浏览器专有的Hack方式，微软官方推荐使用的hack方式。举例如下只在IE6下生效这段文字只在IE6浏览器显示 CSS hack方式二：符号前缀在标准模式中 “-″减号是IE6专有的hack “\9″ IE6/IE7/IE8/IE9/IE10都生效 “\0″ IE8/IE9/IE
复制链接

扫一扫

专栏目录