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. sql 连接数不释放 ，Druid异常：wait millis 40000, active 600, maxActive 600

    Hibernate + Spring + Druid 数据库mysql 由于配置如下 <bean id="dataSource" class="com.alibab ...

  2. 获取IP地址 & 伪装IP地址发送请求

    //获取请求客户端IP地址   public final static String getIpAddress(HttpServletRequest request) throws IOExcepti ...

  3. 05.DOM

    DOM基础 什么是DOM 标签元素节点浏览器支持情况  火狐支持最好 谷歌其次 ie最差 尤其是ie6-8DOM节点节点分为:元素节点和文本节点 测试节点的类型用nodeTypenodeType 为3 ...

  4. socket通信

    socket通信 一:socket基于Tcp连接,数据传输有保证 二:socket连接的建立过程: 1:服务器监听 2:客户端发出请求 3:建立连接 4:通信 三:一个简单的例子:服务器端每隔一段时间 ...

  5. java并发编程（十四）同步问题的内存可见性

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17288243 加锁(synchronized同步)的功能不仅仅局限于互斥行为,同时还存在另 ...

  6. jq仿淘宝放大镜插件

    html部分 //小图 <div id="photoBox"> <img src="图片路径" width="400" h ...

  7. TCP三次握手四次挥手

    看到一篇总结很好的TCP三次握手,学习一下,原文链接. 建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看看如何建立连接的. 首先Client端发送连接请求报文,S ...

  8. windows和linux中搭建python集成开发环境IDE——如何设置多个python环境

    本系列分为两篇: 1.[转]windows和linux中搭建python集成开发环境IDE 2.[转]linux和windows下安装python集成开发环境及其python包 3.windows和l ...

  9. .NET面试题系列[12] - C# 3.0 LINQ的准备工作

    "为了使LINQ能够正常工作,代码必须简化到它要求的程度." - Jon Skeet 为了提高园子中诸位兄弟的英语水平,我将重要的术语后面配备了对应的英文. .NET面试题系列目录 ...

  10. ABP理论学习之开篇介绍

    返回总目录 为了和2016年春节赛跑,完成该系列博客,我牺牲了今天中午的时间来完成该系列的第一篇----开篇介绍.开篇介绍嘛,读过大学教材的同学都知道,这玩意总是那么无聊,跟考试没关系,干脆直接跳过, ...