当前位置:  编程技术>数据库 iis7站长之家

CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera

    来源: 互联网  发布时间:2014-10-07

    本文导语:  现在的浏览器IE6-IE10、Firefox、Chrome、Opera、Safari。。。数量众多,可谓百家争鸣,对用户来说有了很多的可选择型,不过这可就苦了Web前端开发人员了。今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐、Chrome、Op...

现在的浏览器IE6-IE10、Firefox、Chrome、Opera、Safari。。。数量众多,可谓百家争鸣,对用户来说有了很多的可选择型,不过这可就苦了Web前端开发人员了。
今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐、Chrome、Opera浏览器的Hack,并把这些CSS Hack综合的一起,写了一个小的浏览器测试器。如图所示:

下面就来看一下代码吧:

html部分:

代码如下:


   

   

       

IE6下背景颜色:#ccc


       

IE7下背景颜色:#666


       

IE8下背景颜色:#06f


       

IE9下背景颜色:#f00


       

IE10下背景颜色:#0ff


       

webkit,Safari,Chrome下背景颜色:#ff0


       

FireFox下背景颜色:#f0f


       

Opera下背景颜色:#0f0


   


CSS部分,此部分就只贴Hack部分的代码吧,布局的就不贴了:

代码如下:

.content .test {
    width: 200px;
    height: 200px;
    background: #f60; /*all*/
    background: #06f9; /*IE*/
    *background: #666; /*IE6,7*/
    _background: #ccc; /*IE6*/
}

/* webkit and opera */
@media all and (min-width:0){
    .content .test {
        background: #0f0;
    }
}

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .content .test {
        background: #ff0;
    }
}

/*FireFox*/
@-moz-document url-prefix() {
    .content .test {
        background: #f0f;
    }
}

/*IE9+*/
@media all and (min-width:0) {
    .content .test{
        background: #f009;
        }
}

/*IE10+*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .content .test {
        background: #0ff;
    }
}

css-hack-ms-moz-webkit-o-Jb51.net.rar


    
 
 
 
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • DIV+CSS布局教程大全与pdf电子书 下载
  • 淘宝段正淳的css笔记大全第1/4页
  • 推荐个Css的filter常用滤波器属性及语句大全
  • java命名空间javax.swing.text.html类css的类成员方法: css定义及介绍
  • <!--@import"css/cssset/.css-->,css/cssset/.css是什么意思?
  • java命名空间javax.swing.text.html类css的类成员方法: getattribute定义及介绍
  • CSS预处理器 Less CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: font定义及介绍
  • css强制换行 css强制不换行的css方法
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: margin定义及介绍
  • CSS代码格式化 CSS Beautify
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: padding定义及介绍
  • jquery css类用法(添加、修改与删除css)
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: border定义及介绍
  • CSS 框架 Simpl.css
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: clear定义及介绍
  • CSS解析器 CSS Parser
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: height定义及介绍
  • CSS压缩器 Css Compressor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: color定义及介绍
  • Eclipse的CSS编辑插件 CSS Editor
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: display定义及介绍
  • jQuery添加/改变/移除CSS类及判断是否已经存在CSS
  • java命名空间javax.swing.text.html类css.attribute的类成员方法: float定义及介绍
  • CSS代码检查工具 CSS Lint


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3