针对特定浏览器起作用的CSS: IE Chrome Firefox CSS Hack_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 11:54:19
原创
1179人浏览过

Firefox的CSSHack


只在firefox上应用的css hack,虽然这种情况非常少,但有时也会碰到:

 

@-moz-document url-prefix() { .cssSelector {  font-size: 14px; }}
登录后复制

Chrome的CSSHack


只在Chrome上应用的CSS Hack,目前这种情况还没有碰到(使用Chrome作为开发浏览器的原因?),有备无患吧。

@media screen and (-webkit-min-device-pixel-ratio:0) {    #test1{color:red;}}
登录后复制

IE6/7/8/9+的CSS Hack

只在IE上应用的CSS Hack, 这种情况几乎经常碰到, 这里使用的是一种通用的方法,情况复杂,需要先划分一下版本:

在body上附加一个IE版本的class

Hack CSS跟其他CSS文件写一起。

IE9+ 不加Hack;IE6,IE7, IE8 加 ie的前辍, IE6多加一个ie6的前辍Hack (大部分给ie7/8写的hack, IE6都会用到)

<!--[if lt IE 7 ]><body class="ie ie6"><![endif]--><!--[if IE 7]><body class="ie"><![endif]--><!--[if IE 8]><body class="ie"><![endif]-->
登录后复制

为IE附加新的CSS文件

IE7/8多加一个,IE6多加两个,就让IE多装点东西吧,不要污染别的CSS文件

会译·对照式翻译
会译·对照式翻译

会译是一款AI智能翻译浏览器插件,支持多语种对照式翻译

会译·对照式翻译 0
查看详情 会译·对照式翻译

立即学习前端免费学习笔记(深入)”;

<!--[if lt IE 9]><link type="text/css" rel="stylesheet" href="css/show_ie.css"><![endif]--><!--[if lt IE 7]><link type="text/css" rel="stylesheet" href="css/show_ie6.css"><![endif]-->
登录后复制



注* lt 是 less than的意思;即 "ifless than IE9" = "if lt IE 9",还有几个,不过用得比较少

  • gt: greater than
  • lte: less than or equal to
  • HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    开源免费商场系统广告
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号