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. Torch Problems: require some packages doesn't work

    I've recently got a problem. require 'cutorch' doesn't work. But it was ok yesterday, although I hav ...

  2. redis主从配置及主从切换

    环境描述: 主redis:192.168.10.1 6379从redis:192.168.10.2 6380 一.主从配置 1.将主从redis配置文件redis.conf中的aemonize no ...

  3. mac 终端 常用命令

    基本命令1.列出文件ls 参数 目录名        例: 看看驱动目录下有什么:ls /System/Library/Extensions参数 -w 显示中文,-l 详细信息, -a 包括隐藏文件2 ...

  4. WebService的工作原理

    Web Service全称XML Web Service WebService是一种可以接收从Internet或者Intranet上的其它系统中传递过来的请求,轻量级的独立的通讯技术.是:通过SOAP ...

  5. SQL 去掉某字段括号中的值

    今天在数据库匹配数据的时候,发现一些数据存在别名,导致我的数据匹配不上.在这里记录分享一下 例如: 李钟硕 (Lee Jong Suk),这里我匹配的是 “李钟硕” 示例1: SELECT rever ...

  6. jquery 回到顶部，简洁大方

    效果

  7. 2016huasacm暑假集训训练五 E - What Is Your Grade?

    题目链接:http://acm.hust.edu.cn/vjudge/contest/126708#problem/E 题意:给做出的题目个数,5个的100分,4个的前n/2的同学95,后n/2的90 ...

  8. Unity小游戏制作 - 暗影随行

    用Unity制作小游戏 - 暗影惊吓 最近玩了一个小游戏,叫做暗影惊吓,虽然是一个十分简单的小游戏,但是感觉还是十分有趣的.这里就用Unity来实现一个类似的游戏. 项目源码:DarkFollow 主 ...

  9. Hbuilder开发HTML5 APP之打开新页面

    mui.openWindow({ url: 'examples/info.html', id:'info' }); 要在页面间传递参数,需要使用一个extras:{}对象另外打开的页面显示的内容必须装 ...

  10. 用jdbc访问大段文本数据

    package it.cast.jdbc; import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.F ...