CSS兼容各浏览器的hack:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
浏览器的种类多，麻烦自然也多，主要是各种浏览器对某些属性的渲染效果并不相同，所以有时候需要专门针对特定浏览器或者特定版本书写CSS代码，这样就需要用到所谓的“CSS Hack”，下面以一段实例的形式介绍一下个浏览器hack。

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="author" content="http://www.softwhy.com/" />

<title>蚂蚁部落</title>

<style>

.test{

  width: 300px;

  height: 300px;

  background: #fac;   /*各浏览器都认识，主要给高级浏览器用*/

  background: blue\0; /*ie10、9、8*/

  background: red\9; /*所有的 ie*/

  +background: yellow; /*ie7、6 +号同*号 */

  _background:black; /*ie6*/

}

:root .test{background: blue\9;} /*ie9*/

.ie10 .test{background: #ffcccc;} /*ie10  (js 专属)*/

</style>

<script type="text/javascript">

  //ie 10

  if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {

    document.documentElement.className += "ie10";

}

</script>

</head>

<body>

  <div class="test">蚂蚁部落</div>

</body>

</html>

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=3370

更多内容:http://www.softwhy.com/shili/

CSS兼容各浏览器的hack的更多相关文章

  1. css兼容各个浏览器的三角形图标

    css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...

  2. 兼容各种浏览器的hack写法

    1.Firefox @-moz-document url-prefix() { .selector { property: value; } }上面是仅仅被Firefox浏览器识别的写法 具体如:@- ...

  3. css兼容大部分浏览器的文本超出部分显示省略号

    css之字体多行省略(兼容大部分浏览器) 字体单行显示省略号 <style> .box1{ width: 500px; height: 1.5em; overflow: hidden; t ...

  4. 纯css兼容个浏览器input[type='radio']不能自定义样式

    各个浏览器对于表单input[type='radio'].input[type='checkbox']的样式总是各有差异   //html <div class="remember-a ...

  5. 兼容不同浏览器的 CSS Hack 写法

    所谓 CSS Hack,是指在 CSS 代码中嵌入诸如 *,*html  等代码,方便于独立控制某种浏览器的具体样式.比如有些 CSS Hack 只能被 IE6 或 IE7 识别,而 Firefox ...

  6. 【原】CSS实现背景透明，文字不透明，兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  7. 主流浏览器css兼容问题的总结

    最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑.主要测试了chrome,fire ...

  8. CSS实现背景透明，文字不透明，兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  9. div+css兼容 ie6_ie7_ie8_ie9_ie10和FireFox_Chrome等浏览器方法

    1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行   ...

随机推荐

  1. spring静态代理

    一.代理概念 为某个对象提供一个代理,以控制对这个对象的访问. 代理类和委托类有共同的父类或父接口,这样在任何使用委托类对象的地方都可以用代理对象替代.代理类负责请求的预处理.过滤.将请求分派给委托类 ...

  2. 用Node.js发送邮件

    本文讲的是用Node.js通过一个开启smtp的已有的邮箱账号发送邮件,而不是如何创建一个邮件服务器 开启smtp服务 首先要去要使用的邮箱中设置开启smtp,才能正常发送邮件 这边以163邮箱为例 ...

  3. linux一句话轻松提权

    linux命令:‍ [b@fuckks~]$ printf "install uprobes /bin/sh" > exploit.conf; MODPROBE_OPTI** ...

  4. 实现滑动条与表单中的input中的value交互

    最近在写一个考试系统的项目,遇到一些比较有意思的小知识,在这里分享给大家 下面是一个滑动条与input中的value值的交互,即滑动条的颜色会跟随给定input的value值实时变化,虽然表单中的ra ...

  5. Spring4 实例

    结构目录如下: 其中: dao层和entity层都属于hibernate的的管辖.entity层里面装的是每张表对应的持久化类.dao层里面装的是"底层操作数据库的行为",仅仅只是 ...

  6. MySQL数据表range分区例子

    某些行业数据量的增长速度极快,随着数据库中数据量的急速膨胀,数据库的插入和查询效率越来越低.此时,除了程序代码和查询语句外,还得在数据库的结构上做点更改:在一个主读辅写的数据库中,当数据表数据超过10 ...

  7. asp.net[web.config] httphandlers 与实现自由定义访问地址

    今天一起来看一个简单的例子,主要是用来实现一个映射功能,我们一般访问一个网址的时候比如是这样的http://localhost:6166/WebSite1/api/request.aspx?strte ...

  8. Js函数的概念、作用、创建、调用！

    一.函数是用来帮助我们封装.调用代码的最方便的工具! 二.函数的创建方法有三种: 三.函数的创建方式有3种,调用方式也不是单一的,调用方式有4种!      1.作为一个函数去调用 函数名+();(函 ...

  9. NLP－－十项沟通前的思想准备

    如何达到有效沟通?sino NLP课程给我们十项针对沟通前的思想准备,可让我们了解怎样做到效果卓越的沟通: 1.建立和谐气氛. 这是有效沟通的前提条件,只有首先建立一个和谐的气氛,双方才能彼此敞开心扉 ...

  10. SQL Server数据库备份的镜像

    SQL Server数据库备份的镜像 一个完整备份可以分开镜像 USE master GO BACKUP DATABASE [testdatabase] TO DISK = N'C:\testdata ...