• 技术文章 >web前端 >前端问答

    常见css hack有哪些

    青灯夜游青灯夜游2022-07-28 17:19:23原创152

    常见css hack有三种:1、条件hack,语法“<!--[if <条件关键字>? IE <版本号>?]>HTML代码块<![endif]-->”;2、属性前缀hack,语法“selector{<hack>?属性名:属性值<hack>?;}”;3、选择器前缀hack,语法“<hack> selector{ 样式代码 }”。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    CSS hack 是通过在 CSS 样式中加入一些特殊的符号,让不同的浏览器识别不同的符号 (什么样的浏览器识别什么样的符号是有标准的,CSS hack 就是让你记住这个标准),,以达到应用不同的 CSS 样式的目的。

    CSS hack 是因为现有浏览器对标准的解析不同,为了兼容各浏览器,所采用的一种补救方法.。为了兼容低版本浏览器器的 CSS 解析 BUG,不得不把代码写的很绕, 直接增加了维护成本。

    CSS hack 是一种类似作弊的手段, 以欺骗浏览器的方式达到兼容的目的, 是用浏览器的兼容性差异来解决浏览器的兼容性问题。

    常用的css hack有三种:条件hack、属性hack、选择符hack

    1、条件hack

    语法:

    <!--[if <keywords>? IE <version>?]>
    HTML代码块
    <![endif]-->

    取值:

    <keywords>

    if条件共包含6种选择方式:是否、大于、大于或等于、小于、小于或等于、非指定版本

    如不想在非IE中看到某区域,可这样写:

    <!--[if IE]>
    <p>你在非IE中将看不到我的身影</p>
    <![endif]-->

    if条件6种选择方式的使用示例

    是否,示例代码:

    <!--[if IE]>
    <style>
    .test{color:red;}
    </style>
    <![endif]-->

    大于,示例代码:

    <!--[if gt IE 6]>
    <style>
    .test{color:red;}
    </style>
    <![endif]-->

    大于或等于,示例代码:

    <!--[if gte IE 6]>
    <style>
    .test{color:red;}
    </style>
    <![endif]-->

    小于,示例代码:

    <!--[if lt IE 7]>
    <style>
    .test{color:red;}
    </style>
    <![endif]-->

    小于或等于,示例代码:

    <!--[if lte IE 7]>
    <style>
    .test{color:red;}
    </style>
    <![endif]-->

    非指定版本,示例代码:

    <!--[if ! IE 7]>
    <style>
    .test{color:red;}
    </style>
    <![endif]-->

    2、属性前缀hack

    语法:selector{<hack>?property:value<hack>?;}

    取值:

    [;property:value;];:选择webkit核心浏览器(Chrome,Safari)。IE7及以下也能识别。中括号内外的3个分号必须保留,第一个分号前可以是任意规则或任意多个规则[;color:#f00;]; 与 [color:#f00;color:#f00;]; 与 [margin:0;padding:0;color:#f00;]; 是等价的。生效的始终是中括号内的最后一条规则,所以通常选用第一种写法最为简洁。

    说明:

    选择不同的浏览器及版本

    .test{
        color:#090\9; /* For IE8+ */
        *color:#f00;  /* For IE7 and earlier */
        _color:#ff0;  /* For IE6 and earlier */
    }

    3、选择器前缀hack

    语法:<hack> selector{ 样式代码 }

    说明:

    选择不同的浏览器及版本

    * html .test{color:#090;}       /* For IE6 and earlier */
    * + html .test{color:#ff0;}     /* For IE7 */
    .test:lang(zh-cn){color:#f00;}  /* For IE8+ and not IE */
    .test:nth-child(1){color:#0ff;} /* For IE9+ and not IE */

    (学习视频分享:web前端入门

    以上就是常见css hack有哪些的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:hack css
    上一篇:javascript支持多态吗 下一篇:HTML5中WAS是什么意思
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• CSS3动画实战之:超酷炫的粘性气泡效果• 利用纯CSS如何在滚动时自动添加头部阴影• 聊聊怎么巧用CSS给普通黑色二维码添上彩色渐变!• 巧用CSS3滤镜制作文字快闪切换动画效果!• css绝对单位是什么• 聊聊CSS中如何利用柏林噪声绘制炫酷图形!
    1/1

    PHP中文网