您的位置：首页 > 编程技术 > html  >  CSS hack用法案例详解

CSS hack用法案例详解

 更新时间：2021年9月22日 12:00  点击：1594

之前一直很狭隘的对CSS hack持有偏见，觉得写得规范的代码不应该使用这些“邪门歪道”，可最近产品发布一个小问题却让我头疼了很久，最后查了一下资料，竟然使用CSS hack轻松解决了，不得不服啊，对付神奇的IE就得使用这些利器。

什么是CSS hack

由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生成的页面效果不一致，写出针对不同浏览器CSS code就称为CSS hack。

常用的CSS hack 有三种方式，CSS 内部hack、选择器hack、HTML 头部引用，其中第一种最常用。

CSS 内部hack

正经的CSS是这么写的

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css" >
            .test
            {
                background-color:green;
            }
        </style>
    </head>
    <body>
        <div class="test" style="height:100px; width:100px; line-height:100px; margin:50px; border:1px solid #000;"></div>
    </body>
<html>

这样的代码对于所有当前常用的浏览器都是好使的，结果应该是这样子的

但是在CSS3中常见一些这样的写法

/*Mozilla内核浏览器：firefox3.5+*/
  -moz-transform: rotate | scale | skew | translate ;
 /*Webkit内核浏览器：Safari and Chrome*/
  -webkit-transform: rotate | scale | skew | translate ;
 /*Opera*/
  -o-transform: rotate | scale | skew | translate ;
 /*IE9*/
  -ms-transform: rotate | scale | skew | translate ;
 /*W3C标准*/
  transform: rotate | scale | skew | translate ;

如果没有注释乍一看还以为逆天了，这样的代码都好使！这样的代码确实好使，CSS3目前标准还没有统一，各个浏览器都有自己的表现方式，甚至有的实现，有的未实现，在前面加一些前缀以表示支持某个特定浏览器，这也是CSS 内部hack的基本原理，向上面这些简单易懂，但是真正的CSS hack 远远不止于此，因为有不死的IE6及其各种奇葩的兄弟版本。

CSS 内部hack 语法是这样的 selector{<hack>?property:value<hack>?;} ，上面代码所示的是在属性名称之前的hack，当然还有这样的

*background-color:green;

属性前面加个“*”这样的写法只会对IE6、7生效，其它版本IE及现代浏览器会忽略这条指令（没有特殊说明，本文所有hack都是指在声明了DOCTYPE的文档的效果）

-background-color:green;

属性前面有个“-”这样的只有IE6识别，还有些在后面的hack

background-color:green!important;

这样在属性值后面添加“!important”的写法只有IE6不能识别，其它版本IE及现代浏览器都可以识别，还有“+”、“\0”、”\9” 等，乱七八糟好烦，画个表

这样就清楚多了吧。如果只想给上面的test DIV在IE访问的时候加绿色背景，就可以这么写

background-color:green\9;

如果想IE6红色，IE7绿色，其它黄色（当然没人这么无聊）就可以这么写

background-color:green; +background-color:green; _background-color:green;

选择器hack

选择器hanck主要是针对IE浏览器，其实并不怎么常用，语法是这样的：<hack> selector{ sRules }

:root .test
{
    background-color:green;
}

HTML头部引用

HTML头部引用就比较特殊了，类似于程序语句，只能使用在HTML文件里，而不能在CSS文件中使用，并且只有在IE浏览器下才能执行，这个代码在非IE浏览下非单不是执行该条件下的定义，而是当做注释视而不见。

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

lte：就是Less than or equal to的简写，也就是小于或等于的意思。

lt ：就是Less than的简写，也就是小于的意思。

gte：就是Greater than or equal to的简写，也就是大于或等于的意思。

gt ：就是Greater than的简写，也就是大于的意思。

! ：就是不等于的意思，跟javascript里的不等于判断符相同。

书写顺序

看看，看看，这么多姿势，那么一个效果，好多种写法，什么顺序写才能保证各个浏览器都得到希望的效果呢？因为CSS只要是同一级别，出现重复属性设置，后出现的会覆盖前面出现的，所以在书写的时候一般把识别能力强的写前面，看个例子

_background-color:red;
background-color:green;

如果希望DIV在IE6上是红色，其它是绿色，上面的写法可不可以呢？试一下发现所有浏览器上都是绿色，因为在IE6解析的时候，第一句能够识别，背景设为红色，但是第二句所有浏览器都识别，IE6也不例外，背景颜色又被设为绿色，所以得反过来写

background-color:green;
_background-color:red;

总结出的规律就是：先一般，再特殊。有兴趣的同学可以试试试试下面CSS，看看和你想的效果是否一样

background-color:blue; /*所有浏览器*/
background-color:red\9;/*所有的ie*/
background-color:yellow\0; /* ie8+*/
+background-color:pink; /*+ ie7*/

到此这篇关于CSS hack用法案例详解的文章就介绍到这了,更多相关CSS hack用法内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

[!--infotagslink--]

相关文章

  • php中去除文字内容中所有html代码

    PHP去除html、css样式、js格式的方法很多，但发现，它们基本都有一个弊端：空格往往清除不了 经过不断的研究，最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02

  • jquery ready函数、css函数及text()使用示例

    .text更改内容 .css更改样式...2013-10-03

  • React引入antd-mobile+postcss搭建移动端

    本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程，文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了，防止大家踩坑，特此把解决方案分享到脚本之家平台，需要的朋友参考下吧...2021-06-21

  • js+css实现回到顶部按钮（back to top）

    这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮，感兴趣的小伙伴们可以参考一下...2016-03-03

  • 解决vue scoped scss 无效的问题

    这篇文章主要介绍了解决vue scoped scss 无效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-04

  • BootStrap CSS全局样式和表格样式源码解析

    这篇文章主要为大家详细解析了BootStrap图片样式、辅助类样式和CSS组件源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-23

  • XML、HTML、CSS与JS的区别整理

    在BS中，xml，html，css和js我们都学过，起初分不清这四者的区别和联系，随着知识的增长，有了一些体会，下面通过本文给大家简单介绍 XML、HTML、CSS与JS的区别，需要的朋友参考下...2016-02-21

  • 详解微信小程序 通过控制CSS实现view隐藏与显示

    这篇文章主要介绍了微信小程序 通过控制CSS实现view隐藏与显示的相关资料,需要的朋友可以参考下...2017-05-27

  • 在JS中如何使用css变量详解

    这篇文章主要给大家介绍了关于如何在JS中如何使用css变量以及export之javascript关键字的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2021-09-02

  • JavaScript驾驭网页-CSS与DOM

    DOM是种符合万维网标准的HTML操纵方式，它能比innerHTML特性达成更多操控功能。这篇文章主要介绍了JavaScript驾驭网页-CSS与DOM的相关资料,需要的朋友可以参考下...2016-03-28

  • js+css简单实现网页换肤效果

    这篇文章主要介绍了js+css简单实现网页换肤效果的方法,涉及JavaScript响应鼠标事件动态遍历及修改页面元素样式的相关技巧,需要的朋友可以参考下...2016-01-02

  • Webpack打包css后z-index被重新计算的解决方法

    这篇文章主要跟大家分享了Webpack打包css后z-index被重新计算的解决方法，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编一起来学习学习吧。...2017-06-24

  • JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)

    这篇文章主要介绍了JS+CSS实现的漂亮渐变背景特效代码,包含6个渐变效果,涉及JavaScript针对页面元素属性动态操作的相关技巧,需要的朋友可以参考下...2016-03-28

  • 一步步教大家编写酷炫的导航栏js+css实现

    一步步教大家编写酷炫的导航栏，js+css实现黑色经典导航栏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-03-18

  • jquery结合css实现返回顶部功能

    在本篇文章里小编给大家整理了一篇关于jquery结合css实现返回顶部功能的相关文章，有兴趣的朋友们可以实例测试下。...2021-08-02

  • Vant+postcss-pxtorem 实现浏览器适配功能

    这篇文章主要介绍了Vant+postcss-pxtorem 实现浏览器适配,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-02-05

  • 原生javascript+CSS实现轮播图效果

    这篇文章主要为大家详细介绍了原生javascript+CSS实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-08-18

  • BootStrap 图片样式、辅助类样式和CSS组件的实例详解

    这篇文章主要介绍了BootStrap 图片样式、辅助类样式和CSS组件的实现代码，图文并茂介绍的非常详细，需要的朋友参考下吧...2017-01-23

  • CSS中position属性之fixed实现div居中

    这篇文章主要介绍了CSS中position属性之fixed实现div居中的相关资料,需要的朋友可以参考下...2015-12-16

  • js css实现垂直方向自适应的三角提示菜单

    这篇文章主要为大家详细介绍了js css实现垂直方向自适应的三角提示菜单的相关资料,需要的朋友可以参考下...2016-07-01