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. CSS hack技巧大全

    ——作者:吴雷君 兼容范围: IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome 参考资料: 各游览器常用兼容标记一览表: 标记 IE6 IE7 I ...

  2. Cocos2d 利用继承Draw方法制作可显示三维数据（宠物三维等）的三角形显示面板

    很久没有写博客了,这段时间比较忙,又是搬家又是做自己的项目,还有太多琐碎的事情缠身,好不容易抽出时间把最近自己做的一些简单例子记录一下. 在我的项目中,我需要一个显示面板来显示游戏中的一个三维数据,例 ...

  3. java-sql注入攻击

    注射式攻击的原理 SQL注射能使攻击者绕过认证机制,完全控制远程服务器上的数据库.SQL是结构化查询语言的简称,它是访问数据库的事实标准.目前,大多数Web应用都使用SQL数据库来存放应用程序的数据. ...

  4. qemu ubuntu for zynq（armhf）

    apt-get install qemu-user-static qemu-system mkdir qemu-ubuntu qemu-debootstrap --arch=armhf trusty ...

  5. listview嵌套gridview，并实现grid元素部分显示以及点击展开与折叠

    原文链接:http://blog.csdn.net/duguju/article/details/49538341 有时我们需要用GridView显示目录列表,有时甚至是二级的,即listview每一 ...

  6. Unity3D UGUI之DoTweenAnimation脚本控制动画方法

    DOTweenAnimation脚本: Loops循环:-1时即永久循环播放. Loops Type 是选择播放模式. Ease属性里有很多,暂时只知道Linear的效果,其他有待单独写. ID下面可 ...

  7. Swift库运行崩溃

    报错如下: 解决方法: 退出 Xcode 找到 DerivedData 文件夹 删除 (路径: ~/Library/Developer/Xcode/DerivedData) 删除 com.apple. ...

  8. C# Just want 入门

    1. 终于明白为什么以前的程序在结尾部分会经常出现 input any key to exit! using System; namespace ConsoleApplication1 { class ...

  9. XMPP iOS客户端实现三：登录、注册

    1.创建一个单例模式来管理xmpp的连接和操作 +(XMPPManager *)share { static XMPPManager *_share=nil; static dispatch_once ...

  10. 免费开源分布式系统日志收集框架 Exceptionless

    前言 从去年就答应过Eric(Exceptionless的作者之一),在中国会帮助给 Exceptionless 做推广,但是由于各种原因一直没有做这件事情,在此对Eric表示歉意.:) Except ...