css hack怎么用？技巧有哪些？

2021-06-15 09:55:51 浏览数 (42)

在前端开发学习中我们会碰到很多的问题，今天我们就来说说有关于在 css 中“css hack 怎么用？有哪些用法？”的问题吧！

首先我们要知道什么是 HACK ？，简单的来说就是只有在特定的浏览器中才可以使用的一段代码；一般来说有以下三种形式：

1.属性前缀法（css 类内部 Hack）

当我们在不同的浏览器中使用会有不同的代码如：在 IE6 中能识别​“_”​和​“*”​这两个符号，在 IE7 中的话智能识别“*”这个符号，在 IE6-IE10 中都认识​​“\9​​”​​这个符号，但是在 firefox 对我们说到的三个都不认识不会进行操作。（相关代码例子可以在 css hack合集 中查看）

2.选择器前缀法（选择器 Hack）

对于这个方法的语法是这样的：​<hack>select{sRules}​。

在IE6中代码例子代码如下：

*html .test21 { color: gold; }

在IE7中代码例子代码如下： 

*+html .test22 { color: blue; }

在IE6或者IE7中生效例子代码如下：

@media screen\9 {   </p><p>  .test23 { color: purple; }  </p><p>}

在IE6、IE7 、IE8中生效例子代码如下：

@media \0screen\,screen\9 {   </p><p>  .test24 { color: gold; }  </p><p>}

在IE8中生效例子代码如下：

@media \0screen {    .test25 { color: orange; }  }

在IE8、IE9、IE10、IE11中生效例子代码如下：

@media screen\0 {   .test26 { color: green; }  }

在IE9、IE10、IE11中生效例子代码如下：

@media screen and (min-width: 0\0) {   .test27 { color: red; }  }
3.IE条件注释法（Html 头部 引用 Hack）

这个方式是针对所有 IE (在 IE10 以上已经不在支持了) 在 ​Html​ 头部引用就比较特殊，类似程序的语句，只能在 ​HTML​ 文件里面使用，不能在​ css​ 文件中使用，只有在 IE 浏览器中才可以使用 ，在其他的浏览器中会被作为注释不执行代码如下：

<link rel="stylesheet" type="text/css" href="css.css" />
<!–[if IE 7]>
<!– 如果IE浏览器版是7,调用ie7.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]–>
<!–[if lte IE 6]>
<!– 如果IE浏览器版本小于等于6,调用ie.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]–>
总结：

以上就是有关于在“css hack 怎么用？有哪些用法？”的讲解，如果你有更好的方法也可以和大家一起分享。更多有关于在“css hack 怎么用？有哪些用法？”这个问题方面的知识我们也可以在 Css hack 合集中查阅和实践。希望小编的分享对你的问题有所帮助。


CSS

0 人点赞